如何在javascript中访问单击的表格行的特定单元格答案

【问题标题】：How to access specific cell of clicked table row in javascript如何在javascript中访问单击的表格行的特定单元格
【发布时间】：2013-03-26 00:27:32
【问题描述】：

我有一个从数据库填充的 HTML 表。还有一个 jquery 函数，可以将客户端点击事件添加到每个表行。

$(function() {
    $(".TreeTable tr").each(function(index) {
        $(this).click(function() {
            alert($(this).text());
        });
    });
});

现在我可以通过单击任意行来获取完整的行值。现在我需要访问该函数中的单个单元格值。谁能告诉我如何在行点击时获得单个单元格的值。

【问题讨论】：

我想您感兴趣的是被点击行中的多个单元格值，而不是被点击的特定单元格的值？

标签： javascript jquery html css

【解决方案1】：

看看这个：

$(document).ready(function(){
    $('.TreeTable tr').click(function(e){
        var cell = $(e.target).get(0); // This is the TD you clicked
        var tr = $(this); // This is the TR you clicked
        $('#out').empty();
        $('td', tr).each(function(i, td){
            $('#out').html(
              $('#out').html()
              +'<br>'
              +i+': '+$(td).text() 
              + (td===cell?' [clicked]':'') );
        });
    });
});

这是工作代码： http://jsfiddle.net/VbA9D/

如果您可以单击的表格单元格中还有其他 HTML 元素，则下面的示例会更好：

$(document).ready(function(){
    $('.TreeTable tr').click(function(e){
        var cell = $(e.target).get(0); // This is the TD you clicked
        if(cell.nodeName != 'TD') 
            cell = $(cell).closest('td').get(0);
        var tr = $(this); // This is the TR you clicked
        $('#out').empty();
        $('td', tr).each(function(i, td){
            $('#out').html(
              $('#out').html()
              +'<br>'
              +i+': '+$(td).text() 
              + (td===cell?' [clicked]':'') );
        });
    });
});

这是你可以测试的代码：

http://jsfiddle.net/7PWu5/

【讨论】：

【解决方案2】：

首先，不需要.each - .click 方法将绑定到每个传递的元素，而不仅仅是第一个。

其次，表格行元素上有一个名为 cells 的特定属性，可以直接访问行的单元格：

$('.TreeTable').on('click', 'tr', function() {
    var td = this.cells[0];  // the first <td>
    alert( $(td).text() );
});

注意事件委托的使用 - 事件处理程序实际上是在整个表格上注册的，然后依靠事件冒泡告诉您点击了哪一行（并从中获取单元格文本）。

【讨论】：

我不知道单元格属性。很大的帮助。
+ 1 用于使用事件委托。效率更高，而不是将侦听器附加到 1000 行，例如...

【解决方案3】：

您可以通过使用获取第二个单元格

 alert($('td', this).eq(1).text());

通常，为了获得更可靠的代码，您更愿意向所需的单元格添加一个类，以便您可以使用

 alert($('td.myclass', this).text());

如果您想要获取被点击的单元格，只需将事件绑定到单元格：

$(".TreeTable  td").click(function() { // td not tr
     alert($(this).text());
});

请注意，循环遍历 jQuery 集合来绑定事件是没有用的，正如您从我上一个代码中看到的那样。

【讨论】：

【解决方案4】：

我更喜欢这个：

$('.TreeTable').on('click', 'td', function() { // td not tr
     alert($(this).text());
});

【讨论】：

【解决方案5】：

您不需要显式地使用.each() 迭代来将事件处理程序绑定到一组元素，事件绑定函数会隐式地为您执行此操作。由于事件传播，您可以将事件处理程序绑定到<tr> 并使用event.target（原始元素）来获取对实际单击的元素（<td>）的引用：

$(function() {
    $('.TreeTable tr').click(function(event) {
        console.log(this); // the <tr>
        console.log(event.target); // the <td>
    });
});

假设您对被点击的特定 <td> 元素感兴趣。

【讨论】：