Question

我有一个HTML表，里面有几行，每行都有一个select控件。

在更改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>

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

即使我在第一行的Select控件上选择，当前也会添加新行。

Answer 1

Pure JS：

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

DEMO： http://jsfiddle.net/c9XYS/

jQuery的：

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

DEMO： http://jsfiddle.net/c9XYS/1/

Answer 2

我认为index方法可能就是你要找的......

Answer 3

首先，您应该使用jQuery添加事件处理程序。我在您的示例中为每个选择添加了operator类来执行此操作。其次，您可以在最近的:last-child元素上使用tr选择器，以确定它是否是表中的最后一个。试试这个：

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

Example fiddle

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并不是一个好主意。改为使用一个类。

如何使用jquery在html中查找子元素（数字）的位置

5 个答案: