Javascript向表中添加新行并替换ID答案

【问题标题】：Javascript add new line to table and replace IDsJavascript向表中添加新行并替换ID
【发布时间】：2021-12-16 17:40:27
【问题描述】：

我是一名业余编码员，正在努力解决以下问题：我得到了一个包含几行的表格元素，每行 3 个单元格。通过底部的按钮，我想添加行。该表如下所示：

<table id="mytable">
  <tr id="line[0]"><td id="cellA[0]"</td><td id="cellB[0]"</td><td id="cellC[0]"</td></tr>
  <tr id="line[1]"><td id="cellA[1]"</td><td id="cellB[1]"</td><td id="cellC[1]"</td></tr>
  <tr id="line[2]"><td id="cellA[2]"</td><td id="cellB[2]"</td><td id="cellC[2]"</td></tr>
</table>

我用 elementbyID "line" 循环，发现最后一行是 [2]。然后像这样添加一个新行：

var table = document.getElementById("mytable");
var row = table.insertRow(oldID + 1);
row.setAttribute("id","line["+ oldID + 1 + "]");

这很好用。

接下来我通过 var lastLine = document.getElementById(oldID).innerHTML 获取最后一行的内容。现在因为 td ID 是 cellA[2]、cellB[2] 和 cellC[2]。我想用 [3] 替换那些。

我尝试了以下操作：

var oldVar = "[" + oldID + "]";
var newVar = "[" + oldID + 1 + "]";
var regex = new RegExp(oldVar, "g");
var neueLine = lastLine.replace(regex, newVar);

但这会产生像“cellA[3][3]”、“cellB[3][3]”和“cellC[3][3]”这样的 id。

我觉得我有限的知识错过了应该做到这一点的方法。

非常感谢您的帮助！

【问题讨论】：

标签： javascript

【解决方案1】：

你可以使用replaceAll

lastLine = lastLine.replaceAll("[" + oldID + "]","[" + (oldID+1) + "]")

【讨论】：

太棒了！完美运行。我知道我错过了一些非常简单的东西。非常感谢您的快速答复。
@Matthias Sweet！
这将在 HTML 上使用正则表达式，不一定只是 ID

【解决方案2】：

这会奏效——它可以用更少的指令进行编码，但可读性很强。我还修复了无效的 HTML

window.addEventListener("load", function() {
  const table = document.querySelector("#mytable tbody");
  document.getElementById("add").addEventListener("click", function() {
    const lastRow = table.querySelector("tr:last-child")
    let id = +lastRow.id.replace(/\D+/g, ""); // grab and convert to number
    let newId = id+1;
    const newLine = lastRow.cloneNode(true);
    newLine.id = newLine.id.replace(id,newId);
    newLine.querySelectorAll("td").forEach(cell => cell.id = cell.id.replace(id,newId))
    table.appendChild(newLine)
  })
})

<input type="button" id="add" value="Add" />
<table id="mytable">
  <tbody>
    <tr id="line[0]">
      <td id="cellA[0]">A</td>
      <td id="cellB[0]">B </td>
      <td id="cellC[0]">C</td>
    </tr>
    <tr id="line[1]">
      <td id="cellA[1]">A </td>
      <td id="cellB[1]">B</td>
      <td id="cellC[1]">C </td>
    </tr>
    <tr id="line[2]">
      <td id="cellA[2]">A</td>
      <td id="cellB[2]">B</td>
      <td id="cellC[2]">C</td>
    </tr>
  </tbody>
</table>

【讨论】：