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

Question

我有一个删除tr并重新生成tr的id序列的代码。但是它在tr点击时起作用，我想在点击按钮时做到这一点。我是怎么做的。

以下是我的代码

这里的tr 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();
        });

要删除所需的行，请单击该按钮。

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