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

时间:2018-02-03 01:01:14

标签: javascript html

我有一个场景,我删除了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();

1 个答案:

答案 0 :(得分:6)

发现问题,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来迭代嵌套循环。

希望它对你有所帮助。