Discussion :

[Daïmanu]

Bonjour.

Je manipule un énorme tableau (pratiquement 400 <tr>), de 3 colonnes, et je dois rajouter une colonne vide (pour l'instant) entre l'actuelle deuxième et troisième :

Passer de :

Code html :

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

1
2
3
4
5
<tr>
<td>1</d>
<td>2</td>
<td>3</td>
</tr>

À :

Code html :

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

1
2
3
4
5
6
<tr>
<td>1</d>
<td>2</td>
<td>Nouvelle colonne</td>
<td>3</td>
</tr>

J'ai rapidement bidouillé un script que je lance dans la console javascript :

Code js :

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

1
2
3
4
document.querySelectorAll("tr td:nth-child(2)").forEach(td => {
    ntd = document.createElement("td");
    td.insertAdjacentElement("afterend", ntd);
})

Pas de souci à ce niveau là, ça fonctionne et les 400 nouveaux éléments apparaissent dans le DOM. Je pensais ensuite copier-coller le HTML depuis l'outil développeur (F12).

Mais, à ma grande stupéfaction, ia copie ne prend absolument pas le DOM généré, seulement le DOM de base. Pareil avec l'outil "Code source de la page". Testé avec Firefox et Chromium.

Donc est-ce qu'il est possible de dump le HTML, en incluant les éléments générés ?
Si non, est-ce qu'il y a un autre moyen de rajouter ces éléments, via script ou autre (Python, shell, autre, …) ? Sachant que je suis sous Linux et j'utilise Visual Studio Code.

[Daïmanu]

Bon j'ai réussi avec une méthode sioux, avec chercher/remplacer via des regex

Code :

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

<tr>\n(\t+<td>.*)\n(\t+<td>.*)\n(\t+<td>.*)\n\t+</tr>

Code :

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

<tr>\n$1\n$2\n\t\t\t\t<td></td>\n$3\n\t\t\t</tr>

En gros, chercher la séquence <tr> + les 3 <td> + </tr> et rajouter le couple <td></td> au bon endroit.
Pas très conventionnel mais ça fonctionne.

[mathieu]

en passant par "code source de la page" c'est normal de voir le résultat de base envoyé par le serveur.
par contre dans les outils de développement, vous auriez dû tout récupérer. si vous avez la possibilité de réessayer, faites "Modifier comme HTML" et ensuite vous pouvez copier le code html actuel.

[Daïmanu]

Je viens de tester l'option "Modifier comme HTML", celle-ci ne me montre pas non plus les modifications du DOM via le script que j'ai lancé dans la console.

Par contre je peux copier le contenu rajouté par cette option.

C'est comme si il y avait deux comportements distincts, l'un ignore les nouveaux éléments, l'autre non. J'en suis presque à me demander si je vais pas chercher de l'aide côté forum des navigateurs.

[NoSmoking]

Bonjour,
il existe depuis la nuit des temps des méthodes de manipulation pour les <table> comme HTMLTableRowElement.insertCell().

Le code en devient des plus simple :

Code :

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

1
2
3
4
const table = document.getElementById("id-table");
for( let tr of table.rows){
  tr.insertCell(2); //  (!) les index commence à zéro
}