Javascript DOM Trickiness

Question

У меня возникли проблемы с поиском способа самостоятельной ссылки на строку таблицы в 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 не обязательно будет соответствовать содержимому строки.

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

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

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

Answer 1

как насчет:

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

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

Answer 2

Судя по внешнему виду вашего кода, вы используете jQuery, чтобы вы могли легко получить 5-е число с помощью

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

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

Оформить заказ JQuery EQ селектор для получения дополнительной информации

Answer 3

Сначала создайте элемент <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();
}