Recupere les chiffre dans input

merci, j'ai un peut modifier le code

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

il m'affiche

<tableau class=grilleentier><ligne><colonne></colonne></ligne></tableau>

normalement, il devrait afficher

<tableau class=grilleentier>
<ligne id="1">
<colonne id="1"></colonne>
<colonne id="2"></colonne>
<colonne id="3"></colonne>
</ligne>

<ligne id="2">
<colonne id="1"></colonne>
<colonne id="2"></colonne>
<colonne id="3"></colonne>
</ligne>



</tableau>

le id , c'est le chiffre qu'on a mis dans l'input

coment, je doit afficher le numero du id selon le chiffre du formulaire

et afficher les class dans chaque balise

merci de ton aide

As tu regardé dans la console de ton navigateur si il ne te retournait pas une erreur ?
As tu vérifié ( à l'aide d'un console.log par exemple) ce que vaut ta variable

 var seltableau =$('#nbrlignetableau, #nbrcollonetableau').val();

Ce que tu dois faire.. c'est récupérer CHAQUE valeur séparément

var nbrlignetableau = $('#nbrlignetableau').val();
var nbrcollonetableau $('#nbrcollonetableau').val();

Puis les utiliser pour générer ton tableau.

A noter qu'un tableau... c'est à base de TR et de TD ... et non pas des balises inventées ' ligne/colonne'
https://developer.mozilla.org/fr/docs/Apprendre/HTML/Tableaux/Basics

Et puis, tu veux en faire quoi une fois récupérées de tes variables ???
Car si ton but est de générer autant de lignes/colonnes que les nombres indiqués dans tes variables.... il faudra au minimum que tu utilises des boucles... (une pour les lignes.. une pour les colonnes)

Et donc...

Primo.. tu ne dois pas savoir ce qu'est la CONSOLE du navigateur... et en tout cas.. ne jamais l'avoir ouverte....
Car sinon tu aurais vu que tu as de nombreuses erreurs.... à commencer par l'utilisation de "-" dans le nom des variables !
Javascript ne le permet pas !

par exemple

var style-tableau = $('#style-tableau ').val();

génèrera une erreur....
A la place, il faut

var style_tableau = $('#style-tableau ').val();

j'ai corrigé, j'ai tenter de mettre console pour voir s'il y a une erreur ou il m'affiche quelque chose mais pas d'erreur, il nem'affiche rien ;)

on va faire étape par étape si tu est partant ;)

voilà le formulaire html

	  <!--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="nombre-ligne-tableau" 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="nombre-colonne-tableau" required /></div>
	  </div>
   	  <!--fin : on affiche le nombre de collonne du tableau-->
	  
	  
	  
	  
   	  <!--début : on affiche la largeur des collonnes du tableau-->
	  <div class="global-annonce-tableau-modale">
	  <label class="annonce-tableau-modale-label">largeur :</label>
	  <div class="annonce-tableau-modale-input icon-input-nombre-collonne-tableau"><input type="text"  placeholder="500" name="largeur-tableau" id="largeur-tableau" required /></div>
	  </div>
   	  <!--fin : on affiche la largeur des collonnes du tableau-->
	  


   	  <!--début : on affiche la largeur des collonnes du tableau-->
	  <div class="global-annonce-tableau-modale">
	  <label class="annonce-tableau-modale-label">bordure :</label>
	  <div class="annonce-tableau-modale-input icon-input-nombre-collonne-tableau"><input type="text"  placeholder="1" name="bordure-tableau" id="bordure-tableau" required /></div>
	  </div>
   	  <!--fin : on affiche la largeur des collonnes 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 : on affiche l'alignement du tableau-->
	  <div class="global-annonce-tableau-modale">
	  <label class="annonce-tableau-modale-label">alignement :</label>
	  <div class="annonce-tableau-modale-select">
	  <div id="select-annonce-alignement-tableau-1" class="choix formulaire-cliquer">
	  <span id="select-annonce-alignement-tableau-2" class="hida1 icon-select">alignement</span>
	  <ul id="select-annonce-alignement-tableau-3" class="mutliSelect1">
	  <li class="select-choix" data-role="nondefeni">non défeni</li>
	  <li class="select-choix" data-role="gauche">gauche</li>
	  <li class="select-choix" data-role="centrer">centrer</li>
	  <li class="select-choix" data-role="droite">droite</li>
	  </ul></div>	  
	  </div>
	  </div>
   	  <!--fin : on affiche l'alignement du tableau-->
	  
   	  <!--début : on affiche la couleur du texte du tableau-->
	  <div class="global-annonce-tableau-modale">
	  <label class="annonce-tableau-modale-label">couleur du texte :</label>
	  <div class="annonce-tableau-modale-select">
	  <div id="select-annonce-texte-couleur-tableau-1" class="choix formulaire-cliquer">
	  <span id="select-annonce-texte-couleur-tableau-2" class="hida1 icon-select">couleur texte</span>
	  <ul id="select-annonce-texte-couleur-tableau-3" class="mutliSelect1">
	  <li class="select-choix" data-role="textenoir">texte noir</button></li>
	  <li class="select-choix" data-role="textebleu">texte bleu</button></li>
	  <li class="select-choix" data-role="textebleufonce">texte bleu foncé</button></li>
	  <li class="select-choix" data-role="textemarron">texte marron</button></li>
	  <li class="select-choix" data-role="textegris">texte gris</button></li>
	  <li class="select-choix" data-role="textegrisfonce">texte gris foncé</button></li>
	  <li class="select-choix" data-role="textegrisclair">texte gris clair</button></li>
	  <li class="select-choix" data-role="texteor">texte or</button></li>
	  <li class="select-choix" data-role="texterouge">texte rouge</button></li>
	  <li class="select-choix" data-role="textevertfonce">texte vert foncé</button></li>
	  <li class="select-choix" data-role="texterose">texte rose</button></li>
	  <li class="select-choix" data-role="texteargent">texte argent</button></li>
	  <li class="select-choix" data-role="textejaune">texte jaune</button></li>
	  <li class="select-choix" data-role="textefushia">texte fushia</button></li>
	  <li class="select-choix" data-role="texteviolet">texte violet</button></li>
	  <li class="select-choix" data-role="texteolive">texte olive</button></li>
	  <li class="select-choix" data-role="texteazur">texte azur</button></li>
	  <li class="select-choix" data-role="texteorange">texte orange</button></li>
	  <li class="select-choix" data-role="textemarine">texte marine</button></li>
	  <li class="select-choix" data-role="turquoise">texte turquoise</button></li>
	  <li class="select-choix" data-role="texteblanc">texte blanc</button></li>
	  </ul></div>	  
	  </div>
	  </div>
   	  <!--fin : on affiche la couleur du texte du tableau-->
	  
   	  <!--début : on affiche la couleur du fond du tableau-->
	  <div class="global-annonce-tableau-modale">
	  <label class="annonce-tableau-modale-label">couleur du fond :</label>
	  <div class="annonce-tableau-modale-select">
	  <div id="select-annonce-fond-couleur-tableau-1" class="choix formulaire-cliquer">
	  <span id="select-annonce-fond-couleur-tableau-2" class="hida1 icon-select">couleur fond</span>
	  <ul id="select-annonce-fond-couleur-tableau-3" class="mutliSelect1">
	  <li class="select-choix" data-role="fondnoir">fond noir</button></li>
	  <li class="select-choix" data-role="fondbleu">fond bleu</button></li>
	  <li class="select-choix" data-role="fondbleufonce">fond bleu foncé</button></li>
	  <li class="select-choix" data-role="fondmarron">fond marron</button></li>
	  <li class="select-choix" data-role="fondgris">fond gris</button></li>
	  <li class="select-choix" data-role="fondgrisfonce">fond gris foncé</button></li>
	  <li class="select-choix" data-role="fondgrisclair">fond gris clair</button></li>
	  <li class="select-choix" data-role="fondor">fond or</button></li>
	  <li class="select-choix" data-role="fondrouge">fond rouge</button></li>
	  <li class="select-choix" data-role="fondvertfonce">fond vert foncé</button></li>
	  <li class="select-choix" data-role="fondrose">fond rose</button></li>
	  <li class="select-choix" data-role="fondargent">fond argent</button></li>
	  <li class="select-choix" data-role="fondjaune">fond jaune</button></li>
	  <li class="select-choix" data-role="fondfushia">fond fushia</button></li>
	  <li class="select-choix" data-role="fondviolet">fond violet</button></li>
	  <li class="select-choix" data-role="fondolive">fond olive</button></li>
	  <li class="select-choix" data-role="fondazur">fond azur</button></li>
	  <li class="select-choix" data-role="fondorange">fond orange</button></li>
	  <li class="select-choix" data-role="fondmarine">fond marine</button></li>
	  <li class="select-choix" data-role="fondturquoise">fond turquoise</button></li>
	  <li class="select-choix" data-role="fondblanc">fond blanc</button></li>
	  </ul></div>	  
	  </div>
	  </div>
   	  <!--fin : on affiche la couleur du fond 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="poster-tableau" id="poster-tableau">insérer un tableau</button></li></ul></nav>
   	  <!--fin du boutton pour poster le code-->

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

des qu'un membre remplit le formulaire là ça devrait afficher les balises table etc......généré par bbcode.js

mais par contre pour l'instant il récupère juste un sélect et non les 4 sélects et les 4 inputs

j'ai mis data role à chaque li et ca affichera dans le texterea et dans la source la class

<tableau class=textebleu><ligne><colonne></colonne></ligne></tableau>

l'erreur, il oublie de mettre les "" sur la class pour temps j'ai bien mis peut-être au mauvaise endroitsur la pageque j'ai re crée tableau.js

pour afficher tout les variables et les balise <table >etc..


pour info, je sais que c'est mal fait , mal codé mais je veux apprendre il faut aller doucement très doucement,

c'est pour ca , on fera etape par étape afin de faire ceux que j'aimerais qu'il affiche

	  //on afficher la balise <tableau><ligne><colonne.qui est dans une fenêtre modale pour inclure le html des balise sur le textarea affin d'afficher un jolie tableau sur la previsualisation ;)
	  	  
	  $(function()
	  {
	  var seltableau

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


var nombre_ligne_tableau= $('#nombre-ligne-tableau').val(); 
// variable pour afficher le numéro de la colonne 
var nombre_colonne_tableau= $('#nombre-colonne-tableau').val(); 
// variable pour afficher la largeur du tableau 
var largeur_tableau= $('#largeur-tableau').val(); 
// variable pour afficher la bordure du tableau
 var bordure_tableau= $('#bordure-tableau').val(); 

// variable pour afficher le style du tableau
var style_tableau = $('#select-annonce-style-tableau-3').val();
 // variable pour afficher le alignement du tableau 
var alignement_tableau= $('#select-annonce-alignement-tableau-3').val(); 
// variable pour afficher la couleur du texte du tableau 
var couleur_texte_tableau= $('#select-annonce-texte-couleur-tableau-3').val(); 
// variable pour afficher la bordure du tableau 
var couleur_fond_tableau= $('#select-annonce-fond-couleur-tableau-3').val(); 


	  
	  $('.select-choix').on('click', function()
	  {
	  seltableau= $(this).data('role')
	 // $("#sel").val( selcode);
	  });
	  
	  $("#poster-tableau").on('click', function()
	  {
	  $("#annonce-textarea").html( "<tableau class=" +seltableau + "><ligne><colonne>" +$('#annonce-programation-modale-textarea').val() +"</colonne></ligne></tableau>" )
	  });
	  });
	  
	  
	  
	  //on afficher la balise <tableau><ligne><colonne.qui est dans une fenêtre modale pour inclure le html des balise sur le textarea affin d'afficher un jolie tableau sur la previsualisation ;)

si tu te sent pas prets a m'aider à le faire dit moi, je te comprendrais , je laisserais tomber ce tableau ;)

Bonjour,
pas de formulaire commencez par cela vous n'avez que des div qui contiennent des listes. Quand au data role il pourrais être utilisé mieux que cela ou pas du tout.

" il oublie de mettre les "" " ce n'est pas une erreur mais bien la notation permise en HTML5, si vous voulez des guillemets(simple ou double) il faut les indiquer en les échappant avec \ comme ceci:
"<tableau class=\"" +seltableau + "\" >"

Si je ne met pas un formulaire

Comment il va récupérer les informations

tu pourais pas me faire le debut du code pour afficher les numero de ligne et collonne et afficher les class via au data role

juste le debut pour que je puisses mieux comprendre

merci