如何使用jQuery在HTML中的父元素中查找子元素（數字）的位置

Question

我有一個HTML表，里面有幾行，每行有一個選擇控件。

在更改Select control的change事件時，我需要在其下方添加一行。

但是，僅當Select control位於最后一行時，才應添加該行。

如何找到存在selectcontrol的行（如第三行）的位置，我無法以任何方式發布此類圖像，我的源代碼是這樣的：

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

我想在此行下方添加更多行。

即使我在第一行的“選擇”控件上進行選擇，當前也會添加新行。

Answer 1

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

Answer 2

我認為索引方法可能就是您要尋找的...

Answer 3

首先，您應該使用jQuery添加事件處理程序。 我將operator的類添加到示例中的每個選擇中，以執行此操作。 其次，可以在最接近的tr元素上使用:last-child選擇器來確定它是否是表中的最后一個。 嘗試這個：

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

小提琴的例子

Answer 4

您要在最后一個選擇為值== -1時添加新行。

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

順便說一句，您有兩個具有相同名稱的ID（id =“ trSearchRow”），使用類，ID是唯一的。

Answer 5

if ($(this).parent().parent().index() == $('#tbdConditionalSearch > tr').length - 1) {

}

順便說一句，將相同的ID放在所有行上不是一個好主意。 改用一個類。