0

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

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

但是只有Select control在最后一行中才应该添加该行。

如何找到存在选择控件的行（如第 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 控件上进行选择，也会添加新行。

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

我认为index方法可能是您正在寻找的...

于 2013-10-22T14:44:47.887 回答
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 回答
0

您想在最后一次选择时添加一个新行作为值！= -1。

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

顺便说一句，你有两个同名的 id (id="trSearchRow")，使用类，id 是唯一的。

于 2013-10-22T14:52:23.130 回答
0 
if ($(this).parent().parent().index() == $('#tbdConditionalSearch > tr').length - 1) {

}

顺便说一句，在所有行上放置相同的 ID 并不是一个好主意。改用一个类。

于 2013-10-22T14:57:54.740 回答