如何在使用jQuery动态删除行后重置表中TD元素内的输入元素的值和ID？

Question

我有下表：

<thead>
      <th>SR</th>
      <th>Object</th>
      <th>Weight</th>
      <th>Color</th>
      <th>Shape</th>
      <th>DeleteBtn</th>
</thead>
<tr>
      <td><input type="text" id="sr1" value="1" class="sr"></td>
      <td><input type="text" id="object1" value="toy"></td>
      <td><input type="text" id="weight1" value="5kg"></td>
      <td><input type="text" id="color1" value="green"></td>
      <td><input type="text" id="shape1" value="round"></td>
      <td><input type="button" class="deleteRow"></td>
</tr>
<tr>
      <td><input type="text" id="sr2" value="2"></td>
      <td><input type="text" id="object2" value="bottle"></td>
      <td><input type="text" id="weight2" value="1kg"></td>
      <td><input type="text" id="color2" value="red"></td>
      <td><input type="text" id="shape2" value="cylinder"></td>
      <td><input type="button" class="deleteRow"></td>
</tr>
</table>

以上代码仅用于说明。这些行是使用 php、ajax、jQuery 动态生成的。第二列输入元素还具有自动完成功能，基于该功能为每行填充其他列。此外，每个输入元素的 ID 对于进一步复杂的操作数据也很重要。

我已经设置了添加行的代码，该代码将下一个顺序值分配给 SR 列的新生成的行，并为每行依次生成带有 ID 的新行。 但我在删除一行后遇到按顺序重置 SR 值和 ID 的问题，因为用户可以删除中间任意位置的行。 如何按顺序重置 SR 列内输入标记的值属性，并根据新的行数为每行的每个输入元素分配顺序 ID，如上面的代码所示？

Answer 1

您必须向每个表行添加 id 字段，如下所示

<tr id="tr_1">
      <td><input type="text" id="sr1" value="1" class="sr"></td>
      <td><input type="text" id="object1" value="toy"></td>
      <td><input type="text" id="weight1" value="5kg"></td>
      <td><input type="text" id="color1" value="green"></td>
      <td><input type="text" id="shape1" value="round"></td>
      <td><input type="button" class="deleteRow"></td>
</tr>

对应于 sr1，它对于所有行都是唯一的。当您通过 JavaScript 或 jQuery 执行删除命令时

您可以使用jquery的remove()函数来删除行

<tr id="tr_1">
      <td><input type="text" id="sr1" value="1" class="sr"></td>
      <td><input type="text" id="object1" value="toy"></td>
      <td><input type="text" id="weight1" value="5kg"></td>
      <td><input type="text" id="color1" value="green"></td>
      <td><input type="text" id="shape1" value="round"></td>
      <td><input type="button" class="deleteRow"></td>
</tr>

var id // you row identifier
$('#tr_'+id).remove();