Javascript表tr在tr上删除(动态tr删除并重新生成tr id)

Question

我有一个代码可以删除 tr 并重新生成 tr 的 id 序列。 但它适用于 tr 单击，我想通过单击按钮来执行此操作。我是如何做到这一点的。

这是我的代码

这里的tri id是动态的，是字母和数字的组合

< script type = "text/javascript" >

  $("tr").click(function() {

    $(this).nextAll().each(function() {

      var id = $(this).prop("id", function(index, idvalue) {
        console.log(idvalue);

        myArray = idvalue.split(/[0-9]+/);
        var id_text = myArray[0];
        console.log(id_text);

        var id_num = idvalue.replace(/^\D+/g, '');
        console.log(id_num);

        var new_no = id_num - 1;

        var new_id = id_text + '' + new_no;

        return new_id;

      });

    });

    $(this).remove();
  });

<
/script>

<table>
  <tbody>
    <tr id='a1'>
      <td>Row 1</td>
      <td><input type="button" id="btn" name="btn" value="delete" /></td>
    </tr>
    <tr id='a2'>
      <td>Row 2</td>
      <td><input type="button" id="btn" name="btn" value="delete" /></td>
    </tr>
    <tr id='a3'>
      <td>Row 3</td>
      <td><input type="button" id="btn" name="btn" value="delete" /></td>
    </tr>
    <tr id='a4'>
      <td>Row 4</td>
      <td><input type="button" id="btn" name="btn" value="delete" /></td>
    </tr>
    <tr id='a5'>
      <td>Row 5</td>
      <td><input type="button" id="btn" name="btn" value="delete" /></td>
    </tr>
  </tbody>
</table>

Answer 1

第一件事是 - 理想情况下，您不应该为所有行放置相同的 id 值。 id 是整个 DOM 中的唯一标识符。

下一步是 - 正如您对 $(tr) 所做的那样，它将占用整行。

您可以尝试以下操作:

        $("[name=btn]").click(function () {
            $(this).parents('tr').remove();
        });

单击按钮即可删除所需的行。

对于其余的操作，您可以添加您的逻辑。