获取表格jQuery中的第三个单元格答案

【问题标题】：get the third cell in a table jQuery获取表格jQuery中的第三个单元格
【发布时间】：2013-08-04 10:10:02
【问题描述】：

我认为我对此有很好的处理，但显然不是。所以我们又来了。我想要从我单击的位置两个空格的单元格的值。这将是该行的第三列。这是一些需要理解的代码。

我这样创建表

php

$project_info = $db->prepare("
    SELECT  projects.id,
        projects.project_name,                  
        projects.pm,    
        // ...more columns   
    FROM projects
    WHERE account_id = ?                        
"); 

$project_info->bindValue(1, $aid, PDO::PARAM_STR);
$project_info->execute();       

echo "<table class='projects_contentTable'>";
echo "<th class='content_th'>" . "" . "</th>";
echo "<th class='content_th'>" . "" . "</th>";
echo "<th class='content_th'>" . "Job #" . "</th>";
// ...more headers   

while ($row = $project_info->fetch(PDO::FETCH_ASSOC)) {             
    echo "<tr>";
    echo "<td class='content_td'>" . "<img src='images/edit.png' class='edit_project_record'/>" . "</td>";
    echo "<td class='content_td'>" . "<img src='images/view.png' class='view_project_record'/>" . "</td>";              
    echo "<td class='content_td'>" . "<a href='#'>" . $row['id'] . "</a>" . "</td>";
    // ...more td's
    echo "</tr>";               
}
echo "</table>";

这段代码从单元格中获取值

jquery

$('body').on('click', '.edit_project_record', function() {
    pid = $(this).parent().find('td:eq(3)').text();
    alert(pid); 
    loadEditProject();
});

现在，当警报触发时，对话框内没有任何内容。所以我没有从正确的单元格中获取值。我试图在逻辑上打破这一点，但我被卡住了。这是我的理解，显然是错误的

$(this) = 图片，在 'td' 元素内。
parent() = 保存图像的实际 'td' 元素
find('td:eq(3)') = 从父位置查找特定的“td”，在本例中为行的第三列。
.text() = 所选单元格的文本值

请向我解释我的逻辑在哪里出错，以便我解决这个问题。谢谢

【问题讨论】：

您是每次只想要第 3 列还是从您单击的位置开始的单元格 2 列？仔细看下面的答案。他们中的大多数只是选择第三列，而不管点击发生在哪里。
@DevlshOne 是的，我不想要任何第三列。我想要点击发生的行中的第三列。我也不想要 :nth-child(x) 值，因为它会返回列中的所有值。感谢您指出这一点

标签： jquery

【解决方案1】：

如果您真的希望单元格 2 位于您单击的单元格的右侧...

$('.projects_contentTable').on('click', 'td img', function() {
    var myTD = $('td').index(this);
    var pid = $(this).closest('tr').find('td:eq(myTD + 2)').text();
    alert(pid);
    loadEditProject();
 });

【讨论】：

所以我刚刚注意到您的评论。这是否意味着杰森的回答不会产生相同的结果？因为它目前正在给我我想要的价值。和你一样
Jason 的回答很好，因为他的脚本仅在您单击类edit_project_record 时触发，这是单元格的第一列。因此，当它返回第 3 列时，它正在做正确的事情。我的答案可用于任何单元格，因为它不是由特定类触发的，只是由td 中的img 触发。因此，它可能是第 16 个单元格中的 img，它将返回第 18 个单元格的文本。大声笑..你跟着那个？
实际上是的，这是一个很棒的解释。非常感谢
我还有一个问题，反过来也可以。假设图像在第 13 个单元格中，如果您输入('td:eq(myTD - 2)')，它会返回第 11 个单元格的值吗？
是的，它肯定会，但您需要在执行此操作之前检查并确保 myTD > 2。我认为这种方法不会对负数感到满意。 :)

【解决方案2】：

考虑到eq 是从零开始的，所以如果你想获得第三列，你需要使用eq(2)

pid = $(this).closest('tr').find('td:eq(2)').text();

正如其他人的回答已经指出的那样，父级不会给你行，因为this 父级是td。你可以使用closest

【讨论】：

是的，我看到了 jasons 的回答。这正是我需要的解释所需要的。太感谢了。 +1

【解决方案3】：

几件事：

:eq() 是从零开始的，所以你需要 td:eq(2)。
$(this) 是图像，所以$(this).parent() 是td。 find() 搜索后代，您选择的td 中没有tds。

所以你需要这个：

$(this).closest('tr').find('td:eq(2)').text();

closest() 从当前元素开始向上遍历 DOM，直到找到与选择器匹配的元素。从父tr，你可以findtds。

小提琴，用 div 代替图像：http://jsfiddle.net/bAz8P/

【讨论】：

感谢 Jason，这就像一个魅力，解释正是我所需要的，所以我希望不必再问这样的问题了。 +1 并接受回答

【解决方案4】：

您可以使用.closest() 查找行，然后查找单元格（0 基于eq）：

$('body').on('click', '.edit_project_record', function() {
    pid = $(this).closest('tr').find('td:eq(2)').text();
    alert(pid); 
    loadEditProject();
});

【讨论】：

感谢您的帮助 +1 以提供另一种正确的做法