Javascript DOM 技巧

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;
}

在此方法中，我需要访问所单击的表格行的第四个“隐藏”单元格内包含的值。我通常只是将 ID 变量传递到 onClick 方法中，但该表的内容可以排序和重新排列，因此 ID 变量不一定对应于行的内容。

过去四个小时我一直在谷歌搜索，但找不到这种情况的任何具体示例；我尝试过的所有操作都会触发一个 Javascript 错误，声明 obj.cells、obj[4]、obj.childNodes 等不存在，具体取决于我正在尝试哪一个。

有谁知道如何通过将“this”传递到表行的 onClick 来访问表行元素内的表单元格元素的innerHTML？

如果其中任何部分令人困惑，请告诉我，我正在努力在今天离开之前完成这件事，否则我知道我会忘记这一切并必须重新开始。

Answer 1

怎么样:

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

如果这不是您的意思，请告诉我。我不是 100% 确定我明白你的要求:)