javascript - 使用纯 Javascript 更改 html 表行值索引

Question

我有一个场景，我删除了 html 表中的行。删除该行后，我将尝试重新对齐/排序隐藏字段索引。例如，如果删除了带有隐藏字段 name[1]abc tr 的第二行，那么我将尝试生成包含带有索引 name[0] 和隐藏字段的行的表name[1] 等等，有什么建议吗？

My fiddle

<table class="links-list">
  <tbody>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <input type="hidden" name="name[0]abc">
      <input type="hidden" name="name[0]def">
      <input type="hidden" name="name[0]gh1">
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <input type="hidden" name="name[1]abc">
      <input type="hidden" name="name[1]def">
      <input type="hidden" name="name[1]gh1">
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <input type="hidden" name="name[2]abc">
      <input type="hidden" name="name[2]def">
      <input type="hidden" name="name[2]gh1">
    </tr>
  </tbody>
</table>

Javascript

//Loop through table rows
//get all hidden fields for each row
// update index value inside name[index] in sorted order
// like all hidden fields with name[0] in first row name[1] for second row etc
function updateHyperlinkIndexes() {
  var linksList = document.querySelector('.links-list tbody');
  for (var i = 1; i < linksList.children.length; i++) {
    var trContent = linksList.children[i];
    for (var i = 0; i < trContent.children.length; i++) {
      if (trContent.children.item(i).type && trContent.children.item(i).type === "hidden") {
        var cellName = trContent.children.item(i).name;
        trContent.children.item(i).name = cellName.replace(/[.*]/, i);
      }
    }
  }
  return linksList;
};

var updatedHtml = updateHyperlinkIndexes();

Answer 1

发现问题，PFB 正在运行 updateHyperlinkIndexes() 函数。

var linksList = document.querySelector('.links-list tbody');
  for (var i = 0; i < linksList.children.length; i++) {
    var trContent = linksList.children[i];
    for (var j = 0; j < trContent.children.length; j++) {
      console.log(trContent.children[j]);
        if (trContent.children.item(j).type && trContent.children.item(j).type === "hidden") {
        var cellName = trContent.children.item(j).name;
        trContent.children.item(j).name = cellName.replace(/\[.*?\]/g, '['+i+']');
      }
    }
  }

所做的更改包括更正替换正则表达式，它应该是 replace(/\[.*?\]/g, '['+i+']');。其次，您使用了相同的变量 i 来迭代嵌套循环。

希望对你有帮助。