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

我有一个从数据库填充的HTML表格。还有一个jQuery的功能，将客户端点击事件添加到每个表格行。如何在javascript中访问特定单击的表格行

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

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

来源

2013-03-25 Ashish Rathore

我认为您对单击行中的多个单元格值感兴趣，而不是点击特定单元格的值？ – Alnitak 2013-03-25 13:18:34

在此请看：

$(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/

来源

2013-03-25 14:09:57 leoinfo

感谢一吨，尤其是小提琴 – 2014-01-17 10:23:00

您可以通过使用

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

通常情况下，一个更可靠的代码获得第二小区，你会喜欢的一类添加到您想要的细胞，这样就可以使用

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

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

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

请注意，如果要循环使用jQuery集合来绑定一个事件，就像您从上一段代码中看到的一样。

来源

2013-03-25 13:12:28

使用DOM，Luke！ – Alnitak 2013-03-25 13:19:42

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

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

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

注意使用事件代表团 - 事件处理程序实际上是登记在整个表格，然后依靠事件冒泡来告诉你哪个行被点击（并从中获取单元格文本）。

来源

2013-03-25 13:15:24 Alnitak

我不知道细胞属性。大的帮助。 – 2016-08-05 23:36:57

+ 1使用事件委托。效率更高，而不是将听众附加到1000行，例如... – fraktal12 2017-11-16 11:28:41

我更喜欢这样的：

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

来源

2013-03-25 13:16:17

你不需要使用.each()将事件处理程序绑定到一组元素明确迭代，事件绑定功能，将隐含为你做的。由于事件传播，您可以将事件处理程序绑定到<tr>和使用event.target（原始元素）获取对实际点击（在<td>）元素的引用：这是假设你”

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

对点击的具体<td>元素感兴趣。

来源

2013-03-25 13:16:52

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

回答

相关问题