jQuery - 获取与单击的元素在同一行中的表格单元格的文本值

jQuery - Getting the text value of a table cell in the same row as a clicked element

提问by rg88

I click a link in a table cell. I need to get the value of a specific cell within this same table row.

我单击表格单元格中的链接。我需要获取同一表格行中特定单元格的值。

<tr>
    <td class="one">this</td>
    <td class="two">that</td>
    <td class="three">here</td>
    <td class="four"><a href="#">there</a></td>
</tr>
<tr>
    <td class="one">qwqw</td>
    <td class="two">dfgh</td>
    <td class="three">ui</td>
<td class="four"><a href="#">there</a></td>
</tr>

I have a click handler attached to the link in the fourth cell. That click handler calls a function that opens a modal window. When a form in the modal is submitted I want to also pass the value of td class="two" from the row in which the link was clicked to this modal.

我有一个点击处理程序附加到第四个单元格中的链接。该点击处理程序调用一个打开模态窗口的函数。当提交模态中的表单时，我还想将 td class="two" 的值从单击链接的行传递给该模态。

Here is the function that sends the modal (the problem area is getting the correct value for var Something):

这是发送模态的函数（问题区域正在获取 var Something 的正确值）：

var Send = function() {
    var Name = $( '#name' ).val();
    var Something = $(this).closest('td').siblings('.two').text(); // version 1. doesn't work
    var Something = $(this).closest('tr').siblings('td.two').text(); // version 2 also doesn't work
    var Something = $(this).attr('class'); // version 3. just a test but also doesn't work
    $.ajax( {
        async: false,
        data: { name: Name, somedata: Something },
        type: 'POST',
        url: the url
    });        
};

The problem is that I cannot get the correct value for Something. It should be the value of td class=two in the same row as the clicked element.

问题是我无法获得Something的正确值。它应该是与被点击元素在同一行的 td class=two 的值。

The way this all comes together is. Click the target link, that calls a method called Send_Click(). Send_Click does some validations and then calls Send() but the value for Something is never populated. Is this because thisis not what I'm thinking it is? Hjelp!

这一切结合在一起的方式是。单击目标链接，该链接调用称为 Send_Click() 的方法。Send_Click 执行一些验证，然后调用 Send()，但从不填充Something 的值。这是因为this不是我想的那样吗？喂！

回答by Nick Craver

You want .children()instead (documentation here):

你想要.children()（这里的文档）：

$(this).closest('tr').children('td.two').text();

回答by Mottie

Nick has the right answer, but I wanted to add you could also get the cell data without needing the class name

尼克有正确的答案，但我想补充一点，您也可以在不需要类名的情况下获取单元格数据

var Something = $(this).closest('tr').find('td:eq(1)').text();

:eq(#)has a zero based index (link).

:eq(#)有一个从零开始的索引（链接）。

回答by hhhqsun

it should work fine:

它应该可以正常工作：

var Something = $(this).children("td:nth-child(n)").text();

回答by Anna.P

This will also work

这也将起作用

$(this).parent().parent().find('td').text()

回答by Yasin Ergul

so you can use parent() to reach to the parent tr and then use find to gather the td with class two

所以你可以使用 parent() 到达父 tr，然后使用 find 收集第二类的 td

var Something = $(this).parent().find(".two").html();

or

或者

var Something = $(this).parent().parent().find(".two").html();

use as much as parent() what ever the depth of the clicked object according to the tr row

根据 tr 行使用与 parent() 一样多的点击对象的深度

hope this works...

希望这有效...