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

在这种方法中，我需要访问被点击的表格行的第 4 个“隐藏”单元格内部中包含的值。我通常只是将 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

先自己创建<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();
}

Answer 3

从您的代码的外观来看，您使用 jQuery，因此您可以使用

轻松获取第 5 个 td

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

然后用那个 jQuery 元素做任何你想做的事情

结帐jQuery eq selector了解更多信息