代码之家 › 专栏 › 技术社区 › fred basset

如何使用jquery向表中添加新行,并为其分配递增的ID

jquery javascript

fred basset · 技术社区 · 15 年前

我有一个现有的HTML表,它是用户输入GPS点的表单的一部分。用户还可以选择上传GPS数据点。我想要一个用户可以按下的按钮,在这里一些javascript将向表中添加一个或多个新行,但是新行必须继续增加表中使用的名称和ID值。例如,如果最后一行的名称为“x5”,则新插入的行的名称应为“x6”等。

序列 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>

3 回复 | 直到 10 年前

user113716 15 年前

为什么使用杰森 完全合理的解决方案 你什么时候可以使用超工程版本?

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();
    });
});

Jason 15 年前

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

brendan 15 年前

这应该适用于添加一行。您可以将它包装成某种循环来添加多个:

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;
}