Получить индекс из таблицы (у tr нет идентификатора)

ProgramBox

Получить индекс из таблицы (у tr нет идентификатора)

Post author:admin
Запись опубликована:12 мая, 2023
Post category:Вопросы по программированию

#javascript #jquery #dom #dynamic #html-table

#javascript #jquery #dom #динамический #html-таблица

Вопрос:

Я динамически создаю и добавляю в таблицу a <tr> и a <td> с помощью следующего кода:

 $("#table1").append(
        '<tr>' 
        '<td style="cursor:pointer" onclick="pass.data.carregar(this.parentNode.rowIndex-2);">' $("#DRVR_NAME").val() '</td>' 
                    '</tr>');

Пока все в порядке: я могу загрузить данные Td в другие поля, которые я хочу, и нет проблем с их созданием.

Но помимо его создания я должен разрешить пользователю динамически удалять <td> , но, как вы можете видеть, идентификатора для поиска нет. Какой лучший способ разрешить пользователю удалять <td> ?

Я пытаюсь выполнить следующий код:

 $("#table1>tbody>td>tr." teste "").remove();

Но безуспешно! Тестовая переменная — это число, которое я автоматически определяю для регистра.

Любая помощь?

1. Разве вы не можете добавить атрибут id к тому, что вы добавляете? Если нет какого-либо уникального идентификатора или он всегда остается в том же порядке, нет никакого способа настроить таргетинг на определенный элемент. Однако, если вы всегда знаете, что это будет первая ячейка в строке, вы могли бы использовать .index() или .eq()

2. TR предшествует TD кстати, это может быть вашей проблемой. Однако, если у вас есть более одной ячейки таблицы, вы столкнетесь с проблемами с этим кодом.

3. @MarcySutton Привет, Марси, к сожалению, я не могу добавить идентификатор в append, потому что они получат другой счетчик, переданный другой функцией. У меня здесь есть счетчик, если бы я мог выбрать TR с помощью этого селектора, было бы неплохо, но я просто не знаю, как это сделать, я перепробовал много способов, но безуспешно. Давайте предположим, что у нас есть счетчик с именем «USERID», как мне следует поступить, чтобы получить желаемый TR, используя это значение?

4. Как выполняется удаление от пользователя?

5. @kingjiv Пользователь выбирает элемент из списка, затем он загружается в необходимые поля, а затем у пользователя есть возможность удалить его. @MarcySutton Марси, я должен посчитать TDS. Я последовал вашему совету о TR, появившемся перед TD, это, вероятно, была опечатка, но все еще не могу заставить его работать. Мой счетчик на самом деле является скрытым файлом, и его значение изменяется в соответствии с выбранным TD в «списке пользователей» (таблица).

Ответ №1:

If test — это индекс строки, основанный на 0, который вы хотите удалить…

 $("#table1>tbody>tr:eq(" test ")").remove();

1. Брэндом, это работает, но он начинает удалять с нуля, то есть текст! Могу ли я запустить его с n. 2?

2. да, конечно, просто используйте (test 2) вместо test приведенного выше.

3. Брэндон, это сработало отлично!! Спасибо за помощь, я и представить себе не мог, что это так просто… самые простые решения труднее всего найти!! Еще раз большое спасибо!

4. Если Брэндон решил проблему, вы должны пометить его ответ как «Принятый», нажав на галочку слева от его ответа. =)

5. @Armando Freire — Я рад, что это сработало. Вы сами были очень близки к решению, и вам просто нужен был толчок.

Ответ №2:

Установите уникальный атрибут id при динамическом создании каждой ячейки.

 <tr id="uniqueID"><td>Cell Content</td></tr>

Затем используйте простой jquery, чтобы удалить строку по идентификатору.

 $('#uniqueID').remove();

1. Я пробовал это, но не могу заставить это работать, потому что у меня есть массив, который должен обновляться каждый раз, когда пользователь добавляет / удаляет элемент. На самом деле это работает, но если я удалю первый элемент таблицы, я не смогу получить доступ к другим.

Ответ №3:

Ваш код удаления предполагает, что в TD есть класс. Вам придется настроить таргетинг на него с помощью :eq(), сославшись на значение в вашем скрытом поле. Если значение в скрытом поле является числом (индекс выбранного пользователем td = ваш счетчик), вы могли бы попробовать что-то вроде этого:

 var hiddenFieldValue = $('input.hiddenFieldClassName').val();

$("#table1>tbody>tr>td:eq(" hiddenFieldValue ")").remove();

Ответ №4:

Вы могли бы добавить маленький крестик рядом с именем каждого драйвера, который удалит этот td, немного изменив свой код:

 $("#table1").append('<tr>' '<td style="cursor:pointer" onclick="pass.data.carregar(this.parentNode.rowIndex-2);">' $("#DRVR_NAME").val() '<span onclick="$(this.parentNode).remove()">x</span></td>' '</tr>');

Или вы могли бы добавить другую функцию в обработчик щелчков, который вы привязываете к каждому, <td> который будет отображать сообщение в предопределенном <div> виде с запросом пользователя, хочет ли он удалить этот элемент:

 $("#table1").append('<tr>' '<td style="cursor:pointer" onclick="pass.data.carregar(this.parentNode.rowIndex-2);askDelete(this);">' $("#DRVR_NAME").val() '</td>' '</tr>');

а затем определите область сообщений (id = ‘messageArea’) где-нибудь в вашем HTML и следующую функцию в вашем коде:

 askDelete(el){
    var MA=$('#messageArea');
    MA.empty();
    MA.html('Do you want to delete '   el.innerHTML   '?<br>').append('<span id="confirmDelete">delete</span>amp;nbsp;<span id="cancelDelete">cancel</span>')
    MA.find('#confirmDelete').click(function(){$(el).remove();});
    MA.find('#cancelDelete').click(function(){MA.empty();})
}

затем оформите кнопки удаления и отмены по своему усмотрению.