2

次のようなテーブルがあります。

<table width="600" border="1" id="mytable">
    <tbody>
        <tr>
            <td width="300">col1</td>
            <td width="100">col2</td>
            <td width="100">col3</td>
            <td width="100">col4</td>
        </tr>
        <tr>
            <td width="300"><input type="text"></td>
            <td width="100"><input type="text" size="12"></td>
            <td width="100"><input type="text" size="12"></td>
            <td width="100">&nbsp;</td>
        </tr>
        <tr>
            <td width="300"><input type="text"></td>
            <td width="100"><input type="text" size="12"></td>
            <td width="100"><input type="text" size="12"></td>
            <td width="100">&nbsp;</td>
        </tr>
        <tr>
            <td width="300"><input type="text"></td>
            <td width="100"><input type="text" size="12"></td>
            <td width="100"><input type="text" size="12"></td>
            <td width="100">&nbsp;</td>
        </tr>
    </tbody>
    </table>

次に、最後の行に値があるかどうかを確認するだけで、このテーブルを動的に拡張できるようにしたいと考えています。もしそうなら、私はそれを拡大したいし、そうでなければ、そのままにしておく. 現在、キープレス イベントをリッスンすることでこれを実現しています。

    $("#mytable tr:last input").keypress(function () {
    autoAddRow();
    });

これを参照する：

var _addRow = '<tr><td width="300"><input type="text" id="name"></td><td width="100"><input type="text" size="12" id="units"></td><td width="100"><input type="text" size="12" id="value"></td><td width="100">&nbsp;</td></tr>';


function autoAddRow()
{
    if($('#mytable > tr:last > name').val() != "" || $('#mytable > tr:last > units').val() != ""|| $('#mytable > tr:last > value').val() != "")
    {
        $('#mytable tr:last').after(_addRow);
    }
}

これは機能しますが、行を追加するときに、tr:last 選択の目的で最後の行のように扱わないことを除きます。この場合、3 番目の行 (ハードコーディングされた最後の行) は常に、テーブルの最後の行としてチェックされます。

テーブルが動的に拡張されるときにテーブルの最終行をチェックするように強制する方法、またはこの機能を再現する方法を教えてください。

4

1 に答える 1

2

要素が動的に追加されるため、ここでイベント委任を使用する必要があります。

$(document).on('keypress', '#mytable tr:last input', function () {
   autoAddRow();
});

作業中のjsFiddle。

于 2013-06-10T18:14:15.410 に答える