0

内部にいくつかの行があり、各行に選択コントロールがある HTML テーブルがあります。

の変更イベントを変更するには、Select controlその下に行を追加する必要があります。

ただし、行はSelect control最後の行にある場合にのみ追加する必要があります。

selectcontrolが存在する行（3行目など）の位置を見つける方法ソースが次のようになっている方法でその画像を投稿することはできません：

<tbody id="tbdConditionalSearch">
                                <tr id="trSearchRow">
                                    <td>
                                        <input type="text" value=""/>
                                    </td>
                                    <td>
                                        <select name="selectOperator" onchange="AddConditionalSearchRow(this)">
                                            <option value="-1" selected>Select</option>
                                            <option value="0">AND</option>
                                            <option value="1">OR</option>
                                        </select>
                                    </td>
                                </tr>
                               <tr id="trSearchRow">
                                        <td>
                                            <input type="text" value=""/>
                                        </td>
                                        <td>
                                            <select name="selectOperator" onchange="AddConditionalSearchRow(this)">
                                                <option value="-1" selected>Select</option>
                                                <option value="0">AND</option>
                                                <option value="1">OR</option>
                                            </select>
                                        </td>
                                </tr>
                            </tbody>

この行の下にさらに行を追加したい。

現在、最初の行の選択コントロールを選択しても、新しい行が追加されています。

4

5 に答える 5

3

純粋な JS:

function AddConditionalSearchRow(sel) {
    var row = sel.parentNode.parentNode;
    if (row.rowIndex === row.parentNode.rows.length-1) {
        // add a new row
    }
}

デモ: http://jsfiddle.net/c9XYS/

jQuery:

function AddConditionalSearchRow(sel) {
    if ($(sel).closest("tr").is(":last-child")) {
        // add a new row
    }
}

デモ: http://jsfiddle.net/c9XYS/1/

于 2013-10-22T14:50:56.453 に答える
2

まず、jQuery を使用してイベント ハンドラーを追加する必要があります。operatorこれを行うために、例の各選択にクラスを追加しました。:last-child次に、最も近い要素でセレクターを使用しtrて、それがテーブルの最後かどうかを調べることができます。これを試して：

$('.operator').change(function () {
    if ($(this).closest('tr').is(':last-child')) {
        alert('last');
        //AddConditionalSearchRow(this);
    }
});

フィドルの例

于 2013-10-22T14:50:36.233 に答える
2

インデックスメソッドがあなたが探しているものかもしれないと思います...

于 2013-10-22T14:44:47.887 に答える
0 
if ($(this).parent().parent().index() == $('#tbdConditionalSearch > tr').length - 1) {

}

ところで、すべての行に同じ ID を設定することはお勧めできません。代わりにクラスを使用してください。

于 2013-10-22T14:57:54.740 に答える
0

値として最後の選択が != -1 のときに新しい行を追加します。

function AddConditionalSearchRow() {
    var lastSelectValue = $('#tbdConditionalSearch select:last').val();
    if (lastSelectValue != -1) {
        // add your new row here
    }
}

ところで、同じ名前 (id="trSearchRow") の 2 つの ID があり、クラスを使用し、ID は一意です。

于 2013-10-22T14:52:23.130 に答える