Question

我尝试过以愚蠢的方式为新表插入代码，但即使这样也没有用。什么是正确的方法？这就是我试图做的事情：

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

小提琴：https://jsfiddle.net/d10tk7nr/1/

另外，我愚蠢的方式不包含整个表的原因是因为我想最终使用它的一些单元格将包含随机数据而我不知道如何跳过它。 / p>

Answer 1

如果您想创建一个新的HTML元素，那么每个浏览器都会为您提供帮助。

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

浏览器控制台将准确显示您创建的内容 - 一个尚未成为DOM的新HTML元素：

<tr></tr>

为该表行创建一些内容也是如此：

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

结果将是两个td元素：

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

现在我们必须将这些部件粘合在一起。浏览器也会覆盖你：

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

结果是一个完整的表格行：

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

我们所要做的就是将这一行追加到你的桌子上：

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

您创建的元素现在是DOM的一部分 - 您要表格的主体的子元素。

Click here for a fiddle

修改

如果要将新行插入特定位置，则必须找到应该在其旁边的元素并使用insertBefore。这会将最后一段代码更改为：

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

如果您想选择将新行放在javascript中的哪个位置，可以使用childNodes属性：

console.log(table.childNodes);

Answer 2

我使用insertAdjacentHTML，如下所示：

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

请看这个小提琴：Damien_The_Unbeliever

还演示了如何设置边框。请注意，此代码针对所有表，因此根据您的具体情况，您可能希望更具体。

Tampermonkey，Chrome如何自动将行插入表中？

2 个答案: