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

我试着用一个插入新表的代码的愚蠢的方式，但似乎并没有工作。什么是正确的方式？这里就是我试图做的：Tampermonkey，Chrome如何自动将行插入表中？

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/

此外，之所以我笨的办法不包含整个表是因为一些细胞，我想最终使用这将包含随机数据，我不知道如何跳过。

来源

2017-08-31 Máté Burján

如果你想创建一个新的HTML元素，每一个浏览器都让你知道。

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

浏览器控制台会告诉你，你已经创建了什么 - 一个新的HTML元素还不是DOM的一部分：

<tr></tr>

这同样与创建一些内容是的表行：

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

其结果将是2 TD-元素：

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

现在我们必须将这些零件粘合在一起。浏览器也会让你coverd在此：

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

来源

2017-08-31 13:58:57

非常感谢你为详细解释。有没有办法选择添加该行的位置？ –

我做了一个编辑，应该给你一个答案。 –

我会使用insertAdjacentHTML，就像这样：

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

请参阅此琴：https://jsfiddle.net/52axLsfn/4/

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

来源

2017-08-31 13:01:18 Meldon

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

回答

相关问题