Как найти Положение дочернего элемента (число) внутри родителя в HTML, используя jquery

0

У меня есть таблица HTML внутри, что есть несколько строк, и в каждой строке есть элемент управления select.

При изменении события изменения элемента управления Select control нужно добавить строку ниже.

Но строка должна добавляться только в том случае, если Select control находится в последней строке.

Как найти позицию строки (например, 3-я строка), в которой присутствует 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>

Я хочу добавить несколько строк ниже этой строки.

В настоящее время новые строки добавляются, даже если я выбираю элемент управления Select в первой строке.

Теги:

5 ответов

3
Лучший ответ

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

Поделиться
  • 0
    var rowNumber = $ (objSelect) .parent (). parent () [0] .rowIndex;
  • 0
    @ Арвин: Это тоже сработает. Просто медленнее.
2

Во-первых, вы должны использовать jQuery для добавления обработчиков событий. Для этого я добавил класс operator для каждого выбора в вашем примере. Во-вторых, вы можете использовать селектор :last-child в ближайшем элементе tr чтобы узнать, является ли он последним в таблице. Попробуй это:

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

Пример скрипки

Поделиться
  • 0
    Зачем менять свой ответ?
  • 0
    Это то, что у меня изначально было, но я изменил его, думая, что оно не работает, но это было из-за отсутствия скобки в условии if, поэтому я изменил его обратно.
2

Я думаю, что метод индекса может быть тем, что вы ищете...

Поделиться
  • 0
    Я не знаю, как это объяснить. Неверно говорить, что я хочу найти строку «Сколько», в которой находится мой элемент управления select
  • 0
    На самом деле index это то, что я искал.
0

Вы хотите добавить новую строку при последнем выборе в качестве значения! = -1.

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

Btw, у вас есть две идентификаторы с одинаковым именем (id = "trSearchRow"), использование классов, идентификаторы уникальны.

Поделиться
0 
if ($(this).parent().parent().index() == $('#tbdConditionalSearch > tr').length - 1) {

}

Кстати, не стоит включать одинаковые идентификаторы во все ваши строки. Вместо этого используйте класс.

Поделиться
  • 0
    Спасибо, я сделаю это

Ещё вопросы

Сообщество Overcoder
Наверх
Меню