bbcode tableau JS

**leroilion94** · 12/03/2019, 12h53

bonjour je souhaite faire un tableau en bbcode , mais je n'arrives pas à le fabriquer comme je souhaite

donc j'ai mis html sur une fenêtre modale

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
     <div id="global-annonce-tableau-modale" class="popup_block">
	  <h2>propriété du tableau</h2>
 
   	  <!--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="titre du annonce" id="titre-annonce" 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="titre du annonce" id="titre-annonce" 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="titre du annonce" id="titre-annonce" 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>
	  <nav id="select-annonce-style-tableau-3" class="mutliSelect1"><ul>
	  <li class="aucunebordure" data-role="aucunebordure">aucune bordure</li>
	  <li class="bordureexterieur" data-role="bordureexterieur">bordure extérieure</li>
	  <li class="grilleentiere" data-role="grilleentiere">grille entière</li>
	  </ul></nav>
	  </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>
	  <nav id="select-annonce-alignement-tableau-3" class="mutliSelect1"><ul>
	  <li class="alignementnondefeni" data-role="alignementnondefeni">non défeni</li>
	  <li class="alignementgauche" data-role="alignementgauche">gauche</li>
	  <li class="alignementcentrer" data-role="alignementcentrer">centrer</li>
	  <li class="alignementdroite" data-role="alignementdroite">droite</li>
	  </ul></nav>
	  </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-1" class="choix formulaire-cliquer">
	  <span id="select-annonce-texte-couleur-2" class="hida1 icon-select">alignement</span>
	  <nav id="select-annonce-texte-couleur-3" class="mutliSelect1"><ul>
	  <li class="textenoir" data-role="textenoir">texte noir</button></li>
	  <li class="textebleu" data-role="textebleu">texte bleu</button></li>
	  <li class="textebleufonce" data-role="textebleufonce">texte bleu foncé</button></li>
	  <li class="textemarron" data-role="textemarron">texte marron</button></li>
	  <li class="textegris" data-role="textegris">texte gris</button></li>
	  <li class="textegrisfonce" data-role="textegrisfonce">texte gris foncé</button></li>
	  <li class="textegrisclair" data-role="textegrisclair">texte gris clair</button></li>
	  <li class="texteor" data-role="texteor">texte or</button></li>
	  <li class="texterouge" data-role="texterouge">texte rouge</button></li>
	  <li class="textevertfonce" data-role="textevertfonce">texte vert foncé</button></li>
	  <li class="texterose" data-role="texterose">texte rose</button></li>
	  <li class="texteargent" data-role="texteargent">texte argent</button></li>
	  <li class="textejaune" data-role="textejaune">texte jaune</button></li>
	  <li class="textefushia" data-role="textefushia">texte fushia</button></li>
	  <li class="texteviolet" data-role="texteviolet">texte violet</button></li>
	  <li class="texteolive" data-role="texteolive">texte olive</button></li>
	  <li class="texteazur" data-role="texteazur">texte azur</button></li>
	  <li class="texteorange" data-role="texteorange">texte orange</button></li>
	  <li class="textemarine" data-role="textemarine">texte marine</button></li>
	  <li class="texteturquoise" data-role="texteturquoise">texte turquoise</button></li>
	  <li class="texteblanc" data-role="texteblanc">texte blanc</button></li>
	  </ul></nav>
	  </div>	  
	  </div>
	  </div>
   	  <!--fin : on affiche la couleur du texte 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 fond :</label>
	  <div class="annonce-tableau-modale-select">
	  <div id="select-annonce-fond-couleur-1" class="choix formulaire-cliquer">
	  <span id="select-annonce-fond-couleur-2" class="hida1 icon-select">alignement</span>
	  <nav id="select-annonce-fond-couleur-3" class="mutliSelect1"><ul>
	  <li class="textenoir" data-role="textenoir">texte noir</button></li>
	  <li class="textebleu" data-role="textebleu">texte bleu</button></li>
	  <li class="textebleufonce" data-role="textebleufonce">texte bleu foncé</button></li>
	  <li class="textemarron" data-role="textemarron">texte marron</button></li>
	  <li class="textegris" data-role="textegris">texte gris</button></li>
	  <li class="textegrisfonce" data-role="textegrisfonce">texte gris foncé</button></li>
	  <li class="textegrisclair" data-role="textegrisclair">texte gris clair</button></li>
	  <li class="texteor" data-role="texteor">texte or</button></li>
	  <li class="texterouge" data-role="texterouge">texte rouge</button></li>
	  <li class="textevertfonce" data-role="textevertfonce">texte vert foncé</button></li>
	  <li class="texterose" data-role="texterose">texte rose</button></li>
	  <li class="texteargent" data-role="texteargent">texte argent</button></li>
	  <li class="textejaune" data-role="textejaune">texte jaune</button></li>
	  <li class="textefushia" data-role="textefushia">texte fushia</button></li>
	  <li class="texteviolet" data-role="texteviolet">texte violet</button></li>
	  <li class="texteolive" data-role="texteolive">texte olive</button></li>
	  <li class="texteazur" data-role="texteazur">texte azur</button></li>
	  <li class="texteorange" data-role="texteorange">texte orange</button></li>
	  <li class="textemarine" data-role="textemarine">texte marine</button></li>
	  <li class="texteturquoise" data-role="texteturquoise">texte turquoise</button></li>
	  <li class="texteblanc" data-role="texteblanc">texte blanc</button></li>
	  </ul></nav>
	  </div>	  
	  </div>
	  </div>
   	  <!--fin : on affiche la couleur du texte 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-tableau">insérer le tableau</button></li></ul></nav>
   	  <!--fin du boutton pour insérer le tableau-->
 
	  </div>

comme vous voyez , j'ai 3 inputs ligne , colonnes et largeurs ,les membres mettrons leurs chiffres.

après il y a 3 sortes de selects : alignement, fond couleur du tableau et la couleur du texte.

et ensuite , j'ai mis un buton pour inserrer le tableau

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<button class="icon-button-ajouter" type="submit" data-role="ajouter-tableau">insérer le tableau</button>

c'est là, ou ça coince ou je n'arrives pas à faire .

car quand je cliques sur le button insérer le tableau

dans mon textarea il me mets cette balise

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<ajouter-tableau></ajouter-tableau>

il prend le data role.

je voudrais savoir comment je peut récupéré les infos des inputs et du selects.

j'aimerais bien après avoir cliquer sur le button insérer le tableau

dans le textarea s'affichera ce code html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<table width="200" border="1">
  <tr=ligne1>
    <td=colonne1>&nbsp;</td>
    <td=colonne2>&nbsp;</td>
    <td=colonne3>&nbsp;</td>
    <td=colonne4>&nbsp;</td>
  </tr>
  <tr=ligne2>
    <td=colonne1>&nbsp;</td>
    <td=colonne2>&nbsp;</td>
    <td=colonne3>&nbsp;</td>
    <td=colonne4>&nbsp;</td>
  </tr>
  <tr=ligne3>
    <td=colonne1>&nbsp;</td>
    <td=colonne2>&nbsp;</td>
    <td=colonne3>&nbsp;</td>
    <td=colonne4>&nbsp;</td>
  </tr>
</table>

et j'ai pensé mettre ca dans le bbcode.js

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
      // 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 pouvait m'aider à le fabriquer ce jolie tableau bbcode avec le numero des colonnes et ligne

en espérant quelqu’un a bien compris ceux que j'aimerais faire , sinon veuillez me dire et je re expliquerais s'il le faut

**Beginner.** · 12/03/2019, 17h53

Salut,

Ben je ne suis pas sûr de tout comprendre, tu veux produire dans un premier temps le code html d'une table dont les dimensions sont fournies dans des input ok mais pour les couleurs et l'aignement tu veux que soit ajouté un syle inline ?

Puis tu veux transformer ce code html en un autre code mais je ne suis pas sûr de comprendre lequel, il faudrait que tu donnes plus de précisions...

Envoyé par leroilion94

je voudrais savoir comment je peut récupéré les infos des inputs et du selects.

Il y a bien des input dans le code html mais je n'ai pas vu de select... Il y a par contre des listes, cela doit être une sorte de selecte personnelalisé mais on ne peut pas tester, il nous manque le code CSS et peut-être qu'il y a aussi du JS...

**leroilion94** · 12/03/2019, 23h21

oui, les selects version jquery

je te mets une capture, pour te montré

j'ai mis

4 lignes,
6 colonnes
10 em pour largeur
grille entiere
tableau center
texte marron avec le fond rouge,
bordure 1px

normalement dans le textarea , il y aura ça afficher dans le textarea après avoir cliquer sur inserrer tableau

je t'ai mis juste la premier ligne en couleur etc....

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<table class="table1">
  <tr>
    <td class="texte-marron background-turquoise">colonne1</td>
    <td>colone2</td>
    <td>colone3</td>
    <td>colonne4</td>
    <td>colonne5</td>
    <td>colonne6</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

et normalement, ca doit afficher sur la page prev dont bbcode

voir capture

donc on aura bien 6 colonne et 4 ligne avec une bordure 1px avec le texte marron avec un fond turquoise.

en gros c'est ca que j'aimerais faire

et si possible à côte des balise :

tr on mettra ligne 1 ligne 2 ligne 3
td on mettra colone 1, colonne 2

etc...

si tu peux juste m'aidé à faire c en bbcode en recuperant tout les variable des inputs et li qui est le faux selects

merci , de ton aide

**Beginner.** · 14/03/2019, 16h11

Salut,

Envoyé par leroilion94

je te mets une capture, pour te montré

Ben cela ne suffit pas pour répondre à tes questions, on ne peut toujours pas tester ton code, il manque le CSS et peut-être bien du JS...

Si tu n'as pas le source eh bien il faudrait partir de zéro...

Et tu n'as pas répondu à mes demandes de précisions :

...mais pour les couleurs et l’alignement tu veux que soit ajouté un syle inline ?
Puis tu veux transformer ce code html en un autre code mais je ne suis pas sûr de comprendre lequel, il faudrait que tu donnes plus de précisions...

Sinon voici un exemple simple de code permettant de générer une table (tu peux entrer le nombre de lignes et de colonnes) : https://jsbin.com/kutesivete/edit?js,output

bbcode tableau JS

JavaScript

Discussions similaires

Partager

Partager