点击button获取表格行的内容

我需要提取表格中每列的细节。 例如，列“名称/编号”。

• 该表包含许多地址
• 每行的最后一列有一个button，让用户select列出的地址。

问题：我的代码只拾取第一个具有类nr <td> 。 我如何得到这个工作？

这是jQuery位：

 $(".use-address").click(function() { var id = $("#choose-address-table").find(".nr:first").text(); $("#resultas").append(id); // Testing: append the contents of the td to a div }); 

表：

 <table id="choose-address-table" class="ui-widget ui-widget-content"> <thead> <tr class="ui-widget-header "> <th>Name/Nr.</th> <th>Street</th> <th>Town</th> <th>Postcode</th> <th>Country</th> <th>Options</th> </tr> </thead> <tbody> <tr> <td class="nr"><span>50</span> </td> <td>Some Street 1</td> <td>Leeds</td> <td>L0 0XX</td> <td>United Kingdom</td> <td> <button type="button" class="use-address" /> </td> </tr> <tr> <td class="nr">49</td> <td>Some Street 2</td> <td>Lancaster</td> <td>L0 0XX</td> <td>United Kingdom</td> <td> <button type="button" class="use-address" /> </td> </tr> </tbody> </table> 

Answer 1

练习的目的是find包含信息的行。 当我们到达那里，我们可以很容易地提取所需的信息。

回答

 $(".use-address").click(function() { var $item = $(this).closest("tr") // Finds the closest row <tr> .find(".nr") // Gets a descendent with class="nr" .text(); // Retrieves the text within <td> $("#resultas").append($item); // Outputs the answer }); 

查看演示

现在让我们把重点放在这种情况下的一些常见问题。

如何find最近的行？

使用.closest() ：

 var $row = $(this).closest("tr"); 

使用.parent() ：

您也可以使用.parent()方法向上移动DOM树。 这只是一个有时与.prev()和.next()一起使用的替代方法。

 var $row = $(this).parent() // Moves up from <button> to <td> .parent(); // Moves up from <td> to <tr> 

获取所有表格单元格的值

所以我们有我们的$row ，我们想输出表格单元格文本：

 var $row = $(this).closest("tr"), // Finds the closest row <tr> $tds = $row.find("td"); // Finds all children <td> elements $.each($tds, function() { // Visits every single <td> element console.log($(this).text()); // Prints out the text within the <td> }); 

查看演示

获取特定的<td>值

类似于前一个，但是我们可以指定子元素的索引。

 var $row = $(this).closest("tr"), // Finds the closest row <tr> $tds = $row.find("td:nth-child(2)"); // Finds the 2nd <td> element $.each($tds, function() { // Visits every single <td> element console.log($(this).text()); // Prints out the text within the <td> }); 

查看演示

有用的方法

• .closest() – 获取匹配select器的第一个元素
• .parent() – 获取当前匹配元素集中每个元素的父元素
• .parents() – 获取当前匹配元素集中每个元素的祖先
• .children() – 获取匹配元素集中每个元素的子元素
• .siblings() – 获取匹配元素集中每个元素的同胞
• .find() – 获取当前匹配元素集中每个元素的后代
• .next() – 获取匹配元素集中每个元素的紧随其后的同胞
• .prev() – 获取匹配元素集中每个元素的前一个兄弟元素

Answer 2

你需要改变你的代码来find相对于被点击的button的行。 尝试这个：

 $(".use-address").click(function() { var id = $(this).closest("tr").find(".nr").text(); $("#resultas").append(id); }); 

示例小提琴

Answer 3

尝试这个：

 $(".use-address").click(function() { $(this).closest('tr').find('td').each(function() { var textval = $(this).text(); // this will be the text of each <td> }); }); 

这将find当前点击的button最接近的tr （通过DOM），然后循环每个td – 你可能想创build一个string/数组的值。

这里的例子

在此处使用数组示例获取完整地址

Answer 4

select器".nr:first"专门查找所选表格元素中第一个，也就是第一个具有类"nr"的元素。 如果您改为调用.find(".nr")您将得到表中所有类为"nr"的元素。 一旦拥有了所有这些元素，就可以使用.each方法遍历它们。 例如：

 $(".use-address").click(function() { $("#choose-address-table").find(".nr").each(function(i, nrElt) { var id = nrElt.text(); $("#resultas").append("<p>" + id + "</p>"); // Testing: append the contents of the td to a div }); }); 

但是，这将使您获取表中的所有 td.nr元素，而不仅仅是单击的行中的元素。 要进一步限制您的select到包含单击button的行，请使用.closest方法，如下所示：

 $(".use-address").click(function() { $(this).closest("tr").find(".nr").each(function(i, nrElt) { var id = nrElt.text(); $("#resultas").append("<p>" + id + "</p>"); // Testing: append the contents of the td to a div }); }); 

Answer 5

    函数useAdress（）{ 
     var id = $（“＃choose-address-table”）。find（“。nr：first”）。text（）;
     alert（id）;
     $（ “＃resultas”）追加（ID）;  //testing：将td的内容附加到div
     };

然后在你的button上：

 onclick="useAdress()"