Tampermonkey，Chrome如何自動將行插入表格？

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/

另外，我的愚蠢方法不包含整個表的原因是因為最終要使用此單元格的某些單元格將包含隨機數據，而且我不知道如何跳過。

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的一部分-要成為表主體的子元素。

單擊此處撥弄小提琴

編輯

如果要將新行插入到特定位置，則必須找到該行旁邊的元素，並使用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>');

請看這個小提琴： https : //jsfiddle.net/52axLsfn/4/

還演示了如何設置邊框。 請注意，此代碼針對所有表，因此，根據您的情況，您可能需要更具體。