如何使用jQuery向表中添加新行，并为其增加增量ID [英] How to use jQuery to add a new row to a table, and assgin an incrementing id to it

问题描述

我有一个现有的HTML表，这是用户输入GPS点的表单的一部分.用户还可以选择上传GPS数据点.我希望有一个按钮，用户可以按一下其中一些Javascript将在表中添加一个或多个新行的位置，但是新行必须继续增加表中使用的名称和ID值.例如.如果最后一行的名称为"x5"，则新插入的行的名称应为"x6"，以此类推.

I have an existing HTML table, part of a form where the user enters GPS points. The user also has the option to upload GPS data points. I'd like to have a button the user can press where some Javascript will add one or more new rows to the table, but the new row(s) must continue incrementing the name and id values used in the table. E.g. if the last row had a name="x5", the newly inserted row should have name="x6" etc.

顺序 X 是

Sequence X Y

 </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>

推荐答案

当您可以使用过度设计的版本时，为什么要使用Jason的完全明智的解决方案?

Why use Jason's perfectly sensible solution when you could use an over-engineered version?

; 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 (文本)文本标题变成一个按钮，您可以单击该按钮来添加一行.

Oh, and just in case you're not quite so familiar with jQuery, here's some code that will turn your Sequence text heading into a button you can click to add a row.

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

这篇关于如何使用jQuery向表中添加新行，并为其增加增量ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！