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

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 = 2的值。

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 this is not what I'm thinking it is? Hjelp!

这一切的结合方式是。单击目标链接，该链接调用名为Send_Click（）的方法。 Send_Click执行一些验证，然后调用Send（），但从不填充Something的值。这是因为这不是我的想法吗？ Hjelp！

5 个解决方案

#1

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

你想要.children（）而不是（这里的文档）：

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

#2

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（＃）具有从零开始的索引（链接）。

#3

it should work fine:

它应该工作正常：

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

#4

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();

要么

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...

希望这个有用......

#5

This will also work

这也有效

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

#1