如何使用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

回答

相關問題