如何使用jQuery向表中添加新行，并为其添加递增ID

我有一个现有的HTML表格，是用户输入GPS点的表格的一部分。 用户还可以选择上传GPS数据点。 我想要一个用户可以按下的按钮，其中一些Javascript将向表中添加一个或多个新行，但新行必须继续递增表中使用的名称和id值。 例如，如果最后一行的名称=“x5”，则新插入的行应具有name =“x6”等。

序列X Y.

   
1
 
 
   
2
 
 
   
3
 
 
   
4
 
 
   
5
 
 
   

Answer 1

为什么在使用过度工程版本时使用Jason 完全合理的解决方案 ？

; O）

 function addRow() { var $newRow = $('#gpsTable tbody tr:last-child').clone(); var newid = $newRow.children().eq(1).find('.StdTableData input').attr('id').match(/\d+/); newid = parseInt(newid[0]) + 1; var newXid = 'x' + newid; var newYid = 'y' + newid; $newRow.children().eq(0).find('.StdTableData').text(newid); $newRow.children().eq(1).find('.StdTableData input').attr({id:newXid,name:newXid}).val(''); $newRow.children().eq(2).find('.StdTableData input').attr({id:newYid,name:newYid}).val(''); $('#gpsTable tbody').append($newRow); } 

哦，如果你对jQuery不太熟悉，这里有一些代码可以将你的Sequence文本标题变成一个按钮，你可以点击添加一行。

 $(document).ready(function() { $('th:first').click(function() { addRow(); }); }); 

Answer 2

您的问题的部分解决方案（如果您不想解析ID）可能是创建一个隐藏的输入来存储您的ID值的最后一个数字部分，您可以使用它来增加表ID，同时将隐藏的输入值增加为好。 至于插入表格行，这是非常简单的JS。 创建你的tr元素，创建你的td元素，填充它们，附加到tr，将tr附加到表。 完成。

Answer 3

这应该适用于添加单行。 您可以将它包装在某种循环中以添加多个：

 function AddRow(xValue,yValue) { var index = $("#gpsTable tr:last td:first").text(); var newIndex = parseInt(index) + 1; var rowHtml = '
' + newIndex + '
'; rowHtml += '
'; rowHtml += '
'; $("#gpsTable tr:last").after(rowHtml); return false; }