Rajout de colonne à une <table>

**younesssoleil** · 05/08/2016, 22h51

Bonjour
J'ai un tableau avec 3 lignes et une colonne. Je souhaite par Click sur un bouton créer une nouvelle colonne.

Code html :

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

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

Merci

**eleydet** · 06/08/2016, 10h52

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 :

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
 
<!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>

**younesssoleil** · 06/08/2016, 11h15

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

**sekaijin** · 06/08/2016, 11h16

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 :

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
<!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

**younesssoleil** · 06/08/2016, 11h43

Svp je parle de colonnes et non de lignes
Metci

**sekaijin** · 06/08/2016, 13h21

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

**younesssoleil** · 06/08/2016, 13h46

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

**younesssoleil** · 06/08/2016, 15h16

J'ai trouvé

Code :

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

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";
}

Rajout de colonne à une <table>

JavaScript

Discussions similaires

Partager

Partager