Tampermonkey, Chrome comment insérer automatiquement des lignes dans une table?

Question

J'ai essayé avec une manière stupide d'insérer du code pour une nouvelle table, mais même cela ne semble pas fonctionner. Quelle serait la bonne façon? Voici ce que j'ai essayé de le faire:

var table = document.getElementsByClassName("test") 
[0].getElementsByClassName("tableclass"); 
for (var i = 0, l = table.length; i < l; i++) { 
    var content = table[i]; 
    let s = content.innerHTML; 
    s = s.replace(/table/g, 'table border="1"'); 
    s = s.replace(/tr>[\s\S]*?<tr>[\s\S]*?<td>3/g, 'tr>\r\n<tr>\r\n<td>3'); 
    content.innerHTML = s; 
} 

Et un violon: https://jsfiddle.net/d10tk7nr/1/

De plus, la raison pour laquelle ma façon stupide ne contient pas toute la table est parce que certaines des cellules où je veux éventuellement utiliser cela contiendrait des données aléatoires et je ne sais pas comment ignorer cela.

Answer 1

Si vous voulez créer un nouvel élément HTML, tous les navigateurs vous en parleront.

var tr = document.createElement('tr'); 
console.log(tr); 

La console du navigateur va vous montrer exactement ce que vous avez créé - un nouvel élément HTML qui ne fait pas encore partie du DOM:

<tr></tr> 

va de même avec la création de contenu pour que ligne de la table:

var td1 = document.createElement('td'), 
    td2 = document.createElement('td'); 
td1.innerText = '5'; 
td2.innerText = '6'; 
console.log(td1, td2); 

Le résultat sera deux td-éléments:

<td>5</td> <td>6</td> 

Maintenant, nous devons coller ces pièces ensemble. Les navigateurs ont également vous coverd sur ce point:

tr.append(td1); 
tr.append(td2); 
console.log(tr); 

Le résultat est une ligne de table complète:

<tr><td>5</td><td>6</td></tr> 

Tout ce que nous avons à faire est de joindre cette ligne à votre table:

var table = document.querySelector('.test table tbody'); 
table.append(tr); 

Les éléments que vous avez créés font maintenant partie des éléments DOM - enfant du corps de votre table.

Click here for a fiddle

Modifier

Si vous souhaitez insérer la nouvelle ligne à un endroit précis, vous devez trouver l'élément que vous qui devriez être à côté et utiliser insertBefore.Cela changerait le dernier morceau de code à:

var targetTr = document.querySelector('.test table tr:nth-child(2)'); 
targetTr.parentNode.insertBefore(tr, targetTr); 

Si vous voulez choisir où mettre votre nouvelle ligne dans votre javascript, vous pouvez utiliser la propriété childNodes:

console.log(table.childNodes); 

Answer 2

j'utiliser insertAdjacentHTML, comme ceci:

table[i].insertAdjacentHTML('beforeend', '<tr><td>5</td><td>6</td></tr>');

S'il vous plaît voir ce violon: https://jsfiddle.net/52axLsfn/4/

montre également comment définir la frontière. Notez que ce code cible toutes les tables, donc en fonction de votre situation, vous voudrez peut-être être plus précis.