javascript - 使用 jQuery 添加或删除动态创建的行后重新排列行(ID)

标签 javascript jquery

这里需要帮助。

我发现了一些相关的答案,但无法将其应用到我的案例中。

我需要借助每行中的“添加”和“删除”按钮动态添加和删除行。 一列具有 rowid,在添加或删除行时也需要重新排列。 假设我们有三行,并且删除了第二行,那么行 id 列应该重新排列,即第三行的行 id 现在应该变成二(2)。 同样,如果我们要添加新行,则需要重新排列 rowid 列。

如果问题描述需要更多详细信息,请告诉我。

使用示例代码进行编辑:-

<html>

<head>

</head>

<body>
<table style="width:300px">
<tr>
  <th>RowId</th>
  <th>Description</th>      
  <th>Points</th>
  <th>Add</th>      
  <th>Remove</th> 
  </tr>
<tr>
<tr>
  <td>1</td>
  <td>Desc1</td>        
  <td>50</td>
  <td><a href="#"><img src="" width="43" height="20" />Add</a></td>
  <td><a href="#"><img src="" width="43" height="20" />Remove</a></td>
  </tr>
<tr>
 <td>2</td>
  <td>Desc2</td>        
  <td>50</td>
  <td><a href="#"><img src="" width="43" height="20" />Add</a></td>
  <td><a href="#"><img src="" width="43" height="20" />Remove</a></td>
</tr>
<tr>
 <td>3</td>
  <td>Desc3</td>        
  <td>50</td>
  <td><a href="#"><img src="" width="43" height="20" />Add</a></td>
  <td><a href="#"><img src="" width="43" height="20" />Remove</a></td>
</tr>

<tr>
 <td>4</td>
  <td>Desc4</td>        
  <td>50</td>
  <td><a href="#"><img src="" width="43" height="20" />Add</a></td>
  <td><a href="#"><img src="" width="43" height="20" />Remove</a></td>
</tr>
</table>
</body>

</html>

谢谢!

最佳答案

添加或删除行后,您可以尝试此操作

$('table').find('tr').find('td:first').each(function(index){    
    $(this).text(index+1);
});

DEMO

关于javascript - 使用 jQuery 添加或删除动态创建的行后重新排列行(ID),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23360724/

相关文章:

javascript - 在 laravel 5.3 中添加 css 和 js 文件

javascript - 在 jQuery 中链接时 CSS 属性不起作用

php - 在 {foreach} 标签外创建主复选框

javascript - 如何排除控件使表单变脏?

javascript - 我可以根据是否选中多个复选框来设置启用或禁用复选框吗?

javascript - 在 React Native 中跨两个应用程序共享代码

javascript - 循环数组给我 0 长度

javascript - 如何在JS中编辑html节点的子节点?

javascript - $(element).data ("dataAtribute") 与 $(element).hasClass ("className")

javascript - 如何使用 Ajax 检查登录情况?