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

Question

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. Eg if the last row had a name="x5", the newly inserted row should have name="x6" etc.

Sequence XY

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

Answer 1

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

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

Answer 2

A partial solution to your problem (if you don't want to parse ids) could be to create a hidden input to store the last numeric portion of your ID value which you could use to increment your table ID while incrementing the hidden input value as well. As for inserting a table line, that's pretty straightforward JS. Create your tr element, create your td elements, populate them, append to your tr, append tr to table. Done.

Answer 3

This should work for adding a single row. You could wrap it in some sort of loop to add multiple:

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