单击按钮获取表格行的内容 [英] Get the contents of a table row with a button click
问题描述
我需要提取表格中每列的详细信息。例如，列Name / Nr。。
I need to extract the details of each column in my table. For example, column "Name/Nr.".
- 该表包含多个地址
- 每行的最后一列有一个按钮，用户可以选择列出的地址。
问题：我的代码只选择第一个< td> ，其类别为 nr 。我如何让它工作？
Problem: My code only picks up the first <td> that has a class nr. How do I get this to work?
这是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>
推荐答案
练习的目的是找到行包含信息。当我们到达那里时，我们可以轻松提取所需的信息。
The object of the exercise is to find the row that contains the information. When we get there, we can easily extract the required information.
$(".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
});
VIEW DEMO
现在让我们关注一些常见问题。
Now let's focus on some frequently asked questions in such situations.
使用 .closest（）：
Using .closest():
var $row = $(this).closest("tr");
使用 .parent（） ：
Using .parent():
您还可以使用 .parent（） 方法。这只是一种替代方法，有时与 .prev（）和 .next（）一起使用。
You can also move up the DOM tree using .parent() method. This is just an alternative that is sometimes used together with .prev() and .next().
var $row = $(this).parent() // Moves up from <button> to <td>
.parent(); // Moves up from <td> to <tr>
获取所有表格单元< td> 值
所以我们有 $ row ，我们想输出表格单元格text：
Getting all table cell <td> values
So we have our $row and we would like to output table cell text:
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>
});
VIEW DEMO
与前一个类似，但是我们可以指定孩子的索引< td> 元素。
Similar to the previous one, however we can specify the index of the child <td> element.
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>
});
VIEW DEMO
-
.closest（）- 获取与选择器匹配的第一个元素 -
.parent（）- 获取当前匹配元素集中每个元素的父元素 -
.parents（）- 获取当前每个元素的祖先匹配元素集 -
.children（）- 获取匹配元素集中每个元素的子元素 -
.siblings（）- 获取该组中每个元素的兄弟姐妹匹配元素 -
.find（）- 获取当前匹配元素集中每个元素的后代 -
.next（）- 获取匹配元素集中每个元素的紧随其后的兄弟 -
.prev（）- 获取匹配元素集中每个元素的前一个兄弟
.closest()- get the first element that matches the selector.parent()- get the parent of each element in the current set of matched elements.parents()- get the ancestors of each element in the current set of matched elements.children()- get the children of each element in the set of matched elements.siblings()- get the siblings of each element in the set of matched elements.find()- get the descendants of each element in the current set of matched elements.next()- get the immediately following sibling of each element in the set of matched elements.prev()- get the immediately preceding sibling of each element in the set of matched elements
这篇关于单击按钮获取表格行的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
