0

JavaScript:

$('.addTable').live('click', function () {
    var appendTxt = "<table id='tab1'>  
                <tr><td><input type='text'   name='input1' /></td><td><input type='text'   name='input2' /></td>
                    <td><input type='button' class='addRow' value='Add Row' /></td></tr></table>";
    $("table:last").after(appendTxt);
});

$('.addRow').live('click', function () {
    var appendTxt = "<td><input type='text'name='input1' /></td><td><input 
                type='text'name='input2' /></td><td><input type='button' class='addRow' value='Add Row'/></td> ";
    $("tr:last").after(appendTxt);
});

HTML:

<table id="tab">
    <tr>
        <td>
            <input type="text" name="input1" />
        </td>
        <td>
            <input type="text" name="input2" />
        </td>
        <td>
            <input type="button" class="addRow" value="Add Row" />
        </td>
    </tr>
</table>

<input type="button" class="addTable" value="addTable" />

「行の追加」ボタンを押すと、新しい行が動的に取得されます。「テーブルの追加」ボタンを押すと、新しいテーブルが取得されます。

しかし、この後、新しいテーブルと古いテーブルの両方で「行の追加」を押すと、最後に追加されたテーブルに行が追加されます。これは、最新のテーブルに存在する最新のテーブル$("tr:last").after(appendTxt) に追加するため<tr>です。

「新しいテーブル」を押すと、それぞれのテーブルに行を追加できるようにするためのより良い方法はありますか?

4

1 に答える 1

0

上記のコメントの後。

変化する：

$("tr:last").after(appendTxt);

に：

$(this).closest('table').find('tr:last').after(appendTxt);

新しい行を追加する各テーブルに [行の追加] ボタンが存在すると仮定します。

于 2012-06-27T18:48:51.723 に答える