Tableau sur prévisualisation

bonjour, je vais essayer d'être claire

j'ai mis, un formulaire simple sur une fenêtre modale

voilà le 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="nbrlignetableau" id="nbrlignetableau" 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="nbrcollonetableau" id="nbrcollonetableau" 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="largeurtableau" id="largeurtableau" 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-bordure-tableau"><input type="text"  placeholder="1" name="borduretableau" id="borduretableau" 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">aucune bordure</li>
	  <li class="select-choix">bordure extérieure</li>
	  <li class="select-choix">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">non défeni</li>
	  <li class="select-choix">gauche</li>
	  <li class="select-choix">centrer</li>
	  <li class="select-choix">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">texte noir</li>
	  <li class="select-choix">texte bleu</li>
	  <li class="select-choix">texte bleu foncé</li>
	  <li class="select-choix">texte marron</li>
	  <li class="select-choix">texte gris</li>
	  <li class="select-choix">texte gris foncé</li>
	  <li class="select-choix">texte gris clair</li>
	  <li class="select-choix">texte or</li>
	  <li class="select-choix">texte rouge</li>
	  <li class="select-choix">texte vert foncé</li>
	  <li class="select-choix">texte rose</li>
	  <li class="select-choix">texte argent</li>
	  <li class="select-choix">texte jaune</li>
	  <li class="select-choix">texte fushia</li>
	  <li class="select-choix">texte violet</li>
	  <li class="select-choix">texte olive</li>
	  <li class="select-choix">texte azur</li>
	  <li class="select-choix">texte orange</li>
	  <li class="select-choix">texte marine</li>
	  <li class="select-choix">texte turquoise</li>
	  <li class="select-choix">texte blanc</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">fond noir</li>
	  <li class="select-choix">fond bleu</li>
	  <li class="select-choix">fond bleu foncé</li>
	  <li class="select-choix">fond marron</li>
	  <li class="select-choix">fond gris</li>
	  <li class="select-choix">fond gris foncé</li>
	  <li class="select-choix">fond gris clair</li>
	  <li class="select-choix">fond or</li>
	  <li class="select-choix">fond rouge</li>
	  <li class="select-choix">fond vert foncé</li>
	  <li class="select-choix">fond rose</li>
	  <li class="select-choix">fond argent</li>
	  <li class="select-choix">fond jaune</li>
	  <li class="select-choix">fond fushia</li>
	  <li class="select-choix">fond violet</li>
	  <li class="select-choix">fond olive</li>
	  <li class="select-choix">fond azur</li>
	  <li class="select-choix">fond orange</li>
	  <li class="select-choix">fond marine</li>
	  <li class="select-choix">fond turquoise</li>
	  <li class="select-choix">fond blanc</li>
	  </ul></div>	  
	  </div>
	  </div>
   	  <!--fin : on affiche la couleur du fond du tableau-->

   	  <!--début du boutton pour insérer le tableau-->
      <nav id="global-button-annonce-tableau"><ul><li class="global-formulaire-cliquer-modale-textarea"><button class="icon-button-ajouter" type="submit" data-role="ajouter">insérer le tableau</button></li></ul></nav>
   	  <!--fin du boutton pour insérer le tableau-->

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

je vous mets une capture du formulaire

là j'ai mis le nombre de ligne colonne texte marron fond gris etc....

quand, j'ai cliquer sur insérer le tableau , vous voyez , il me met la balise <ajouter></ajouter>

parce qu'il prend le mot qui est sur data role.

moi, j'aimerais lors du clique sur button c'est de construitre un tableau afind'afficher sur bbcode.js

dans un premier temps , j'aimerais remplacer <ajouter></ajouter> par les balise table tr td

je souhaite qu'il affiche ca en reprennant les infos que les membres auront selecnné sur le formulaire

<table class="grilleentier alignementcentrer">
  <tr=ligne1>
    <td=fusionnecolonneen2>&nbsp;</td>
    <td=colonne3>&nbsp;</td>
    <td=colonne4>&nbsp;</td>
  </tr>
  <tr=ligne2>
    <td=colonne1>&nbsp;</td>
    <td=colone2>&nbsp;</td>
    <td=colonne3 class="texerouge">&nbsp;</td>
    <td=colonne4>&nbsp;</td>
  </tr>
  <tr=ligne3>
    <td=colonne1>&nbsp;</td>
    <td=colone2 class="fondbleu">&nbsp;</td>
    <td=colonne3>&nbsp;</td>
    <td=colonne4>&nbsp;</td>
  </tr>
</table>

le but c'est de récupère les valeurs sur input, et du select etc...

coment, je peux faire afin d'avoir ceux que je désire

voilà un debut du bbcodejs

// début : on affiche le tableau
	  field = field.replace(/<table>([\s\S]*?)<\/table>/g, '<table class="chord">$1</table>');
      // fin : on affiche le tableau
 
      // début : on affiche la ligne du tableau
	  field = field.replace(/<ligne>([\s\S]*?)<\/ligne>/g, '<tr>$1</tr>');
      // fin : on affiche la ligne du tableau
 
      // début : on affiche la colonne du tableau
	  field = field.replace(/<colonne>([\s\S]*?)<\/colonne>/g, '<td>$1</td>');
      // fin : on affiche la colonne du tableau

si quelqu'un peut m'aidé à faire un jolie tableau

merci, d'avance