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

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)

Bonjour ivan750,

C'est un code "concept" tu ne peux pas le coller comme cela.
D'autre part, tu dois le mettre dans ta fonction qui est déclenchée au clic sur le bouton "inserer le tableau" ($("#inserer-tableau").on('click', function(){ mettre le code });

je détaille un peu plus le "code à mettre" :

var seltableau  = récupérer la valeur du style du tableau
var nbdeligne = récupérer la valeur de  ligne
var nbdecolonne= récupérer la valeur de  colonne
var sCode =""; // code se stockage de ton code que tu vas générer, vide au départ
for(var i = 0; i< nbdeligne; i++){
      sCode += debutbaliseligne (i+1) // à replacer par  création d'une balise <ligne=ligne*>, * =  (i+1) pour commencer à 1
     for(var h = 0; h< nbdecolonne; h++){
           sCode += balisecolonne (h+1) // à replacer par : création de test balise <colonne=colonne*></colonne>, * =  (h+1) pour commencer à 1</colonne>
     }
sCode += finbaliseligne //à replacer par fermeture de ta balise de ligne </ligne>, 
}
$("#annonce-textarea").html( "<tableau class=\"" +seltableau + "\" >"+sCode+"</tableau>");

Modifié par aliasdmc (27 Mar 2019 - 19:12)