Блог

У меня возникли небольшие проблемы с выяснением того, как самостоятельно ссылаться на строку таблицы в Javascript.

Вот сводный код:

 $( "#listitems tbody" ).append( "<tr onclick="editListItem(this)">"  
        "<td>"   id.val()   "</td>"    
        "<td>"   title.val()   "</td>"   
        "<td>"   description.val()   "</td>"   
        "<td>"   TF   "</td>"   
        "<td style="visibility: hidden;">"   id.val()   "</td>"   
"</tr>" );
  

Как вы можете видеть, я задаю содержимое строки и ячеек этой таблицы динамически. Однако мне нужно передать ссылку на эту строку таблицы в ее функцию onClick, которая вызывает этот метод Javascript:

 function editListItem(obj) {
    var id = obj.cells[4].innerHTML;
    var cells = document.getElementById('listitems').rows[id].cells;
    DATA[0] = cells[0].innerHTML;
    DATA[1] = cells[1].innerHTML;
    DATA[2] = cells[2].innerHTML;
    DATA[3] = cells[3].innerHTML;
}
  

В этом методе мне нужно получить доступ к значению, содержащемуся внутри 4-й «скрытой» ячейки строки таблицы, на которую был сделан щелчок. Обычно я бы просто передал переменную ID в метод onClick, но содержимое этой таблицы можно сортировать и переставлять, поэтому переменная ID не обязательно будет соответствовать содержимому строки.

Я гуглил последние четыре часа, но не могу найти никаких конкретных примеров для этой ситуации; все, что я пробовал, просто вызывает ошибку Javascript, объявляющую, что obj.cells, obj[4], obj.childNodes и т.д. Не существуют, В зависимости от того, какой из них я пытаюсь.

Кто-нибудь знает, как вы можете получить доступ к innerHTML элементам ячейки таблицы внутри элемента строки таблицы, передав «this» в onClick строки таблицы?

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

как насчет:

 $( "#listitems tbody" ).append(
    $('<tr>....</tr>')
        .bind('click', function(){
            var tds = $(this).find('td'),
                 id = tds.eq(4).text();
        })
);
  

И если это не то, что вы имели в виду, дайте мне знать. Я не уверен на 100%, что понимаю, о чем вы просите 🙂

Судя по вашему коду, вы используете jQuery, поэтому вы можете легко получить 5-й td, используя

 $(this).children('td').eq(4)
  

а затем делайте с этим элементом jQuery все, что хотите

проверьте селектор эквалайзера jQuery для получения дополнительной информации

Сначала создайте свой <tr> элемент самостоятельно и используйте надлежащий JS для регистрации обработчика, а не встраивания обработчика в атрибуты элемента:

 var tr = $('<tr>').click(editListItem);
$("#listitems tbody").append(tr);
$(tr).append( ... );
  

В editListItem , this будет автоматически применяться ко всему элементу строки:

 function editListItem(row) {
    var cells = $(this).children('td');
    var id = $cells.eq(4).text();
    var data = [];
    data[0] = cells.eq(0).html();
}