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();
        });

单击按钮时删除所需的行。

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

Javascript表tr删除tr（动态tr删除并重新生成tr id）

1 个答案: