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% 确定我明白你的要求:)

Answer 2

从代码的外观来看，您使用 jQuery，因此您可以通过使用轻松获取第 5 个 td

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

，然后使用该 jQuery 元素

签出 jQuery eq 选择器 了解更多信息

Answer 3

首先创建您自己的 元素，并使用适当的 JS 注册处理程序，而不是将处理程序嵌入到元素的属性中：

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

在 editListItem 中，这将自动应用于整行元素：

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