如何使用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放在所有行上不是一个好主意。 改用一个类。