Tampermonkey，Chrome如何自动插入行到table？

Question

我试过用一种愚蠢的方法为新的 table 插入代码，但即使这样似乎也行不通。什么是正确的方法？这是我尝试做的事情：

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

还有一个fiddle：https://jsfiddle.net/d10tk7nr/1/

此外，我的愚蠢方法不包含整个 table 的原因是因为我最终要使用它的一些单元格将包含随机数据，我不知道如何跳过它.

Answer 1

我会使用 insertAdjacentHTML，像这样：

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

请看这个fiddle：https://jsfiddle.net/52axLsfn/4/

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

Answer 2

如果您想创建一个新的 HTML-Element，每个浏览器都能满足您的要求。

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

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

<tr></tr>

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

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

结果是一个完整的 table 行：

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

我们所要做的就是将此行附加到您的 table:

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

您创建的元素现在是 DOM 的一部分 - 准确地说是 table 正文的子元素。

Click here for a fiddle

编辑

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

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

如果您想选择在 javascript 中放置新行的位置，您可以使用子节点属性:

console.log(table.childNodes);

Tampermonkey，Chrome如何自动插入行到table？

Tampermonkey, Chrome how to automatically insert rows into a table?

javascript

google-chrome

html-table

insert

tampermonkey