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

我有一个从数据库填充的HTML表。 还有一个jquery函数，它向每个表行添加客户端单击事件

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

现在我可以通过点击任何一行来获得完整的行值。 现在我需要访问该函数中的单个单元格值。

---

任何人都可以告诉我如何在行单击时获取单个单元格的值。

您可以使用

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

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

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

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

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

---

请注意，从我的上一段代码中可以看出，循环jQuery集合来绑定事件是没有用的。

首先，不需要

。每个
-单击
方法将绑定到每个传递的元素，而不仅仅是第一个

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

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

$（'.TreeTable'）。在（'click'，'tr'，function（）上{
var td=this.cells[0]；//第一个
警报（$（td.text（））；
});

注意使用事件委派-事件处理程序实际上在整个表上注册，然后依靠事件冒泡来告诉您单击了哪一行（并从中获取单元格文本）。
我更喜欢这样：

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

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

$（函数（）{
$（'.TreeTable tr'）。单击（函数（事件）{
console.log（this）；//
console.log（event.target）；//
});
});

这是假设您对单击的特定
元素感兴趣。
看看这个：

$(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]':'') );
        });
    });
});

$（文档）.ready（函数（）{
$（'.TreeTable tr'）。单击（函数（e）{
var cell=$（e.target）.get（0）；//这是您单击的TD
var tr=$（this）；//这是您单击的tr
$（'#out'）.empty（）；
$（'td'，tr）.每个（函数（i，td）{
$（'#out'）.html(
$（'#out'）.html（）
+“
”
+i+'：'+$（td.text（））
+（td==单元格？“[单击]：”）；
});
});
});

以下是工作代码：

如果您可能单击的表格单元格中有其他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]':'') );
        });
    });
});

$（文档）.ready（函数（）{
$（'.TreeTable tr'）。单击（函数（e）{
var cell=$（e.target）.get（0）；//这是您单击的TD
if（cell.nodeName！=“TD”）
单元格=$（单元格）.closest（'td'）.get（0）；
var tr=$（this）；//这是您单击的tr
$（'#out'）.empty（）；
$（'td'，tr）.每个（函数（i，td）{
$（'#out'）.html(
$（'#out'）.html（）
+“
”
+i+'：'+$（td.text（））
+（td==单元格？“[单击]：”）；
});
});
});

下面是您可以测试的代码：

我猜想您对单击行中的多个单元格值感兴趣，而不是对单击的特定单元格的值感兴趣？我不知道cells属性。大帮助。活动授权使用+1。效率更高，而不是将侦听器附加到1000行，例如。。。
$(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]':'') );
        });
    });
});