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

我有一个现有的HTML表格，用户输入GPS点的表单的一部分。用户还可以选择上传GPS数据点。我想要一个按钮，用户可以按下一些JavaScript将一个或多个新行添加到表中，但新行必须继续递增表中使用的名称和ID值。例如。如果最后一行有一个名字= “×5”，新插入的行应具有名称= “5233” 等的如何使用jQuery向表中添加新行，并向其添加递增ID

序列 X ý

</thead> 

<tbody> 

    <tr> 
      <td class="zSmall" style="text-align: right;"><div class="StdTableData">1</div></td> 
      <td class="zSmall"><div class="StdTableData"><input type="text" name="x1" id="x1" size="8" maxlength="16" value="38.0"/></div></td> 
      <td class="zSmall"><div class="StdTableData"><input type="text" name="y1" id="y1" size="8" maxlength="16" value="-122.0"/></div></td> 
    </tr> 

    <tr> 

      <td class="zSmall" style="text-align: right;"><div class="StdTableData">2</div></td> 
      <td class="zSmall"><div class="StdTableData"><input type="text" name="x2" id="x2" size="8" maxlength="16" value="38.2"/></div></td> 
      <td class="zSmall"><div class="StdTableData"><input type="text" name="y2" id="y2" size="8" maxlength="16" value="-122.2"/></div></td> 
    </tr> 

    <tr> 
      <td class="zSmall" style="text-align: right;"><div class="StdTableData">3</div></td> 
      <td class="zSmall"><div class="StdTableData"><input type="text" name="x3" id="x3" size="8" maxlength="16" value="38.3"/></div></td> 
      <td class="zSmall"><div class="StdTableData"><input type="text" name="y3" id="y3" size="8" maxlength="16" value="-122.4"/></div></td> 

    </tr> 

    <tr> 
      <td class="zSmall" style="text-align: right;"><div class="StdTableData">4</div></td> 
      <td class="zSmall"><div class="StdTableData"><input type="text" name="x4" id="x4" size="8" maxlength="16" value="38.1"/></div></td> 
      <td class="zSmall"><div class="StdTableData"><input type="text" name="y4" id="y4" size="8" maxlength="16" value="-122.1"/></div></td> 
    </tr> 

    <tr> 
      <td class="zSmall" style="text-align: right;"><div class="StdTableData">5</div></td> 

      <td class="zSmall"><div class="StdTableData"><input type="text" name="x5" id="x5" size="8" maxlength="16" value="38.9"/></div></td> 
      <td class="zSmall"><div class="StdTableData"><input type="text" name="y5" id="y5" size="8" maxlength="16" value="-123.0"/></div></td> 
    </tr> 

</tbody>

来源

2010-02-21 fred basset

为什么使用杰森的完全合理的解决方案当你可以使用过度工程的版本？

; 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，这里的一些代码，将您序列文本标题到一个按钮，你可以点击添加一行。

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

来源

2010-02-21 20:00:07 user113716

谢谢！非常真棒:) - 弗雷德 – 2010-02-21 21:41:07

我的荣幸，弗雷德。请记住点击我的答案旁边的复选框，如果你挖这个。 – user113716 2010-02-21 21:54:31

哈哈......不错的工作帕特里克。认真的，当你可以编码更多的时候谁需要敏感？ :) – Jason 2010-02-22 20:00:29

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

来源

2010-02-21 19:35:49 Jason

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

function AddRow(xValue,yValue) 
{ 
var index = $("#gpsTable tr:last td:first").text(); 
var newIndex = parseInt(index) + 1; 
var rowHtml = '<tr><td class="zSmall" style="text-align: right;"><div class="StdTableData">' + newIndex + '</div></td>'; 
rowHtml += '<td class="zSmall"><div class="StdTableData"><input type="text" name="x' + newIndex + '" id="x' + newIndex + '" size="8" maxlength="16" value="' + xValue + '"/></div></td>'; 
rowHtml += '<td class="zSmall"><div class="StdTableData"><input type="text" name="y' + newIndex + '" id="y' + newIndex + '" size="8" maxlength="16" value="' + yValue + '"/></div></td></tr>'; 

$("#gpsTable tr:last").after(rowHtml); 
return false; 
}

来源

2010-02-21 20:09:14 brendan

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

回答

相关问题