Rajout de colonne à une <table>

Version imprimable

05/08/2016, 22h51
younesssoleil

Rajout de colonne à une <table>
Bonjour
J'ai un tableau avec 3 lignes et une colonne. Je souhaite par Click sur un bouton créer une nouvelle colonne.
Code:

1 2 3 4 5 6 7 8 <input type="button" onclick="nouvel_evenement()" value="Valider" id= "Valider"/> <script> nouvel_evenement(){ } </script>
Merci

Rajout de colonne

Bonjour,

Pour ajouter ou pour supprimer une ligne de tableau, c'est relativement facile. Pour une colonne, il y un peu de travail de codage à effectuer. Je vous propose ci-dessous un exemple de code pour supprimer une ligne de tableau, en modifiant le DOM. Il vous faudra l'adapter à votre besoin.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      function suppr(n) {
        ligne_a_sup = document.getElementById(n);
        ligne_a_sup.parentNode.removeChild(ligne_a_sup);
      }
    </script>
  </head>
  <body>
    <table border="1">
      <tr id="0"><td>Ligne 1</td><td><a onclick="suppr(0);">Sup</a></td></tr>
      <tr id="1"><td>Ligne 2</td><td><a onclick="suppr(1);">Sup</a></td></tr>
      <tr id="2"><td>Ligne 3</td><td><a onclick="suppr(2);">Sup</a></td></tr>
      <tr id="3"><td>Ligne 4</td><td><a onclick="suppr(3);">Sup</a></td></tr>
      <tr id="4"><td>Ligne 5</td><td><a onclick="suppr(4);">Sup</a></td></tr>
    </table>
  </body>
</html>

06/08/2016, 11h15
younesssoleil

Rajout de colonne

Bonjour
Merci, effectivement les lignes c'est assez facile d'où ma question dans ce forum sur les colonnes.
Je souhaite rajouter une colonne.

Citation:

Envoyé par eleydet

... Je vous propose ci-dessous un exemple de code pour supprimer une ligne de tableau, en modifiant le DOM. Il vous faudra l'adapter à votre besoin.

Attention les id html numériques sont considéré comme une mauvaise pratique, même s'il sont toléré
il préférable d'utiliser des id textuels id="ligne_1" à la place de id="1"

quant à utiliser .parentNode autant se passer des id
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function suppr(ligne_a_sup) { ligne_a_sup.parentNode.removeChild(ligne_a_sup); } </script> </head> <body> <table border="1"> <tr><td>Ligne 1</td><td><a onclick="suppr(this.parentNode);">Sup</a></td></tr> <tr><td>Ligne 2</td><td><a onclick="suppr(this.parentNode);">Sup</a></td></tr> <tr><td>Ligne 3</td><td><a onclick="suppr(this.parentNode);">Sup</a></td></tr> <tr><td>Ligne 4</td><td><a onclick="suppr(this.parentNode);">Sup</a></td></tr> <tr><td>Ligne 5</td><td><a onclick="suppr(this.parentNode);">Sup</a></td></tr> </table> </body> </html>
A+JYT

06/08/2016, 11h43
younesssoleil

Svp je parle de colonnes et non de lignes
Metci
06/08/2016, 13h21
sekaijin

Citation:

Envoyé par eleydet

...Je vous propose ci-dessous un exemple de code pour supprimer une ligne de tableau, en modifiant le DOM. Il vous faudra l'adapter à votre besoin.
...

A+JYT
06/08/2016, 13h46
younesssoleil

Je ne peux pas l'adpater à mes besoins....svp... pouvez vous m'indiquer le code pour rajouter une colonne... le code fourni permet de supprimer une ligne
je rappel que j'ai un tableau initial avec 3 lignes et 1 colonne
Merci de votre aide

J'ai trouvé

Code:

1
2
3
4
5
6
<script>
function myFunction() {
    var firstRow = document.getElementById("myTable").rows[0];
    var x = firstRow.insertCell(-1);
    x.innerHTML = "New cell";
}