Recupere et afficher texte sur input

bonjour, j'aimerais aujourd'hui apprendre à récupère une variable via à une input et un select
et ensuite l'afficher

on vas commencer étape par étape si vous voulez bien

par exemple j'ai 2 inputs

<input type="text"  placeholder="3" name="ligne" id="ligne" required />

<input type="text"  placeholder="2" name="colonne" id="colonne" required />

ensuite mes 2 variables

// variable pour afficher le numéro de la ligne 
var ligne= $('#ligne').val(); 
// variable pour afficher le numéro de la colonne 
var colonne= $('#colonne').val(); 

ensuite lors du click sur button

<button type="button" class="icon-button-ajouter" value="inserer-tableau" id="inserer-tableau">insérer un tableau</button>

etla fonction lors du clique

	  $(function()
	  {
	  var seltableau

	  
	  $('.select-choix').on('click', function()
	  {
	  seltableau= $(this).data('role')
	 // $("#sel").val( selcode);
	  });
	  
	  $("#inserer-tableau").on('click', function()
	  {
	  $("#annonce-textarea").html( "<tableau class=\"" +seltableau + "\" ><ligne><colonne>" +$('#annonce-programation-modale-textarea').val() +"</colonne></ligne></tableau>" )
	  });
	  });

il me met bien das le textarea

<tableau><ligne><colonne></colonne></ligne>

moi , j'aimerais qu'il m'affiche

<tableau>
<ligne=ligne1>
<colonne=colonne1></colonne>
</ligne>
<ligne=ligne2>
<colonne=colonne1></colonne>
</ligne>
<ligne=ligne3>
<colonne=colonne1></colonne>
</ligne>

enfin si je met 4 lignes et 3 colonne

il faudrait afficher dans la balise

<tableau>
<ligne=ligne1>
<colonne=colonne1></colonne>
<colonne=colonne2></colonne>
<colonne=colonne3></colonne>
</ligne>
<ligne=ligne2>
<colonne=colonne1></colonne>
<colonne=colonne2></colonne>
<colonne=colonne3></colonne>
</ligne>
<ligne=ligne3>
<colonne=colonne1></colonne>
<colonne=colonne2></colonne>
<colonne=colonne3></colonne>
</ligne>

<ligne=ligne4>
<colonne=colonne1></colonne>
<colonne=colonne2></colonne>
<colonne=colonne3></colonne>
</ligne>

comment, je doit afficher le numero ui est inscrit sur input

soit on affiche <ligne=ligne4> ou <ligne ="ligne4>

merci de votre aide
et après on verras pour la suite comment je doit mettre en en place le code pour afficher les class

Bonjour ivan750
Pour faire simple (car on peut faire mieux), mais déjà comprenons le principe.
Il faut faire des boucles, pour construire ta ligne
dans laquelle tu a encore un boucle pour construire tes colonnes

sCode ="";
for(var i = 0; i< nbdeligne; i++){
sCode += debutbaliseligne (i+1)
for(var h = 0; h< nbdecolonne; h++){
sCode += balisecolonne (h+1)
}
sCode += finbaliseligne
}

Modifié par aliasdmc (27 Mar 2019 - 18:57)

merci, mais ca n'a pas fonctionner , je suis un peut nul j'avoue mais j'essaye d'apprendre vite malgrez mon petit handicape

il me reste juste apprendre à faire ce code pour afficher un tableau si tu est patient et ue tu veux bien m'expliquer étape par étape afi de m'aidé

je t'ai fait une capture , pour l'instant, on se concentre sur mes 2 inputs et mon select (version jquery)

voilà le formulaire qui sur la capture

	  <!--début du global du formulaire-->
	  <form id="global-annonce-tableau-modale" class="popup_block" action="toto.php" method="post" >

	  <fieldset>

	  <legend>propriété du tableau</legend>


   	  <!--début : on affiche le nombre de ligne du tableau-->
	  <div class="global-annonce-tableau-modale">
	  <label class="annonce-tableau-modale-label">ligne :</label>
	  <div class="annonce-tableau-modale-input icon-input-nombre-ligne-tableau"><input type="text"  placeholder="3" name="nombre-ligne-tableau" id="nbdeligne" required /></div>
	  </div>
   	  <!--fin : on affiche le nombre de ligne du tableau-->
	  
	  
	  
   	  <!--début : on affiche le nombre de collonne du tableau-->
	  <div class="global-annonce-tableau-modale">
	  <label class="annonce-tableau-modale-label">collonnes :</label>
	  <div class="annonce-tableau-modale-input icon-input-nombre-largeur-tableau"><input type="text"  placeholder="2" name="nombre-colonne-tableau" id="nbdecolonne" required /></div>
	  </div>
   	  <!--fin : on affiche le nombre de collonne du tableau-->

   	  <!--début : on affiche le style du tableau-->
	  <div class="global-annonce-tableau-modale">
	  <label class="annonce-tableau-modale-label">style du tableau :</label>
	  <div class="annonce-tableau-modale-select">
	  <div id="select-annonce-style-tableau-1" class="choix formulaire-cliquer">
	  <span id="select-annonce-style-tableau-2" class="hida1 icon-select">style du tableau</span>
	  <ul id="select-annonce-style-tableau-3" class="mutliSelect1">
	  <li class="select-choix" data-role="aucunebordure">aucune bordure</li>
	  <li class="select-choix" data-role="bordureexterieur">bordure extérieure</li>
	  <li class="select-choix" data-role="grilleentier">grille entière</li>
	  </ul></div>	  
	  </div>
	  </div>
   	  <!--fin : on affiche le style du tableau-->

   	  <!--début du boutton pour poster le code-->
      <nav id="global-button-annonce-tableau"><ul><li><button type="button" class="icon-button-ajouter" value="inserer-tableau" id="inserer-tableau">insérer un tableau</button></li></ul></nav>
   	  <!--fin du boutton pour poster le code-->

	  </fieldset>
	  </form>
	  <!--fin du global du formulaire-->

tu t’apercevra qu'il y a une class grileentier qui reprend le data role

si tu veux on peut commencer depuis zero qui est pour afficher le nombre de ligne colonne

il faudra déjà essayer d'afficher 6 lignes et 3 colonnes

	  $(function()
	  {
	  var seltableau

        console.log("#nombre-ligne-tableau");

seltableau ="'";
for(var i = 0; i< nbdeligne; i++){
seltableau += debutbaliseligne (i+1)
for(var h = 0; h< nbdecolonne; h++){
seltableau += balisecolonne (h+1)
}
seltableau += finbaliseligne
}	  
	  $('.select-choix').on('click', function()
	  {
	  seltableau= $(this).data('role')
	 // $("#sel").val( selcode);
	  });
	  
	  $("#inserer-tableau").on('click', function()
	  {
	  $("#annonce-textarea").html( "<tableau class=\"" +seltableau + "\" ><ligne><colonne>" +$('#annonce-programation-modale-textarea').val() +"</colonne></ligne></tableau>" )
	  });
	  });

merci de bien vouloir m'expliquer étape par étape
Modifié par ivan750 (26 Mar 2019 - 21:12)