jQuery的：一个按钮点击获取表行的内容 [英] jQuery: Get the contents of a table row with a button click
问题描述
我需要提取我的表中的每一列的细节。例如，列名称/ NR。
- 表包含多个地址
- 每行的最后一栏有一个按钮，让用户选择一个上市的地址。
问题：我的code只挑选了第一个＆LT; TD＆GT; 具有类 NR 。我如何得到这个工作？
这里是jQuery的位：
$（使用地址）。点击（函数（）{
（NR：一是）。VAR ID = $（＃选择地址表）中查找文本（）;
$（＃resultas）附加（ID）; //测试：对TD的内容附加到一个div
}）;
表：
＆LT;表ID =选择地址表级=UI小部件的UI控件内容＆GT;
＆LT;＆THEAD GT;
＆LT; TR类=UI小部件头＆GT;
＆LT;第i个名称/ NR＆LT; /第i个
＆LT;第i个街道＆LT; /第i
＆LT;第i个城市与LT; /第i
＆LT;第i个帖子code＆LT; /第i
＆LT;第i个国家＆LT; /第i
百分位＆gt;选项＆LT; /第i
＆LT; / TR＆GT;
＆LT; / THEAD＆GT;
＆LT;＆TBODY GT;
＆所述; TR＆GT;
＆所述; TD类=NR＆GT;＆下;跨度大于50＆下; /跨度＆GT;
＆LT; / TD＆GT;
＆LT; TD＆GT;有的街1 LT; / TD＆GT;
＆LT; TD＆GT;利兹＆LT; / TD＆GT;
＆LT; TD＆GT; L0 0XX＆LT; / TD＆GT;
＆LT; TD＆GT;英国＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT;按钮式=按钮级=使用地址/＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD类=NR＆GT; 49 LT; / TD＆GT;
＆LT; TD＆GT;有的街2'; / TD＆GT;
＆LT; TD＆GT;＆斯特LT; / TD＆GT;
＆LT; TD＆GT; L0 0XX＆LT; / TD＆GT;
＆LT; TD＆GT;英国＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT;按钮式=按钮级=使用地址/＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; / TBODY＆GT;
＆LT; /表＆gt;
演习的目的是找到包含信息的行。当我们到达那里，我们可以很容易地提取所需的信息。
答
$（使用地址）。点击（函数（）{
变量$项目= $（本）.closest（TR）//查找最接近行＆LT; TR＆GT;
.find（NR）//获取后代与类=NR
。文本（）; //获取LT内及文字; TD＆GT; $（＃resultas）追加（$项目）; //输出答案
}）;
现在让我们专注于一些常见的在这种情况下的问题。
如何找到最接近行？
是 .closest（）：
变量$行= $（本）.closest（TR）;
是 .parent（）：
您也可以使用上移DOM树 .parent（） 方法。这只是有时与一起使用的替代品。preV（）和的.next（）。
变量$行= $（本）.parent（）//来自以下向上移动按钮＆GT;到＆lt; TD＆GT;
.parent（）; TD＆GT; //来自以下的向上移动;到＆lt; TR＆GT;
让所有单元格＆LT; TD＆GT; 值
因此，我们有我们的 $行，我们想输出的表格单元格文本：
变量$行= $（本）.closest（TR）//查找最接近行＆LT; TR＆GT;
$ TDS = $ row.find（TD）; //查找所有子＆lt; TD＆GT;分子$。每个（$ TDS，函数（）{//访问每一个＆LT; TD＆gt;元
的console.log（$（本）的.text（））; //打印出的＆lt内的文本; TD＆GT;
}）;
获取特定＆LT; TD＆GT; 值
到previous种相似，但我们可以指定孩子的指数＆LT; TD方式＆gt; 元素
变量$行= $（本）.closest（TR）//查找最接近行＆LT; TR＆GT;
$ TDS = $ row.find（TD：第n个孩子（2））; //查找第2＆LT; TD＆GT;元件$。每个（$ TDS，函数（）{//访问每一个＆LT; TD＆gt;元
的console.log（$（本）的.text（））; //打印出的＆lt内的文本; TD＆GT;
}）;
有用的方法
-
.closest（）- 获得相匹配的第一个元素选择 -
.parent（）- 获取每个元素的父在当前匹配的元素 -
。家长（）- 让每个元素的祖先在当前匹配的元素 -
。孩子（）- 获得每个元素的子元素在匹配的元素 -
.siblings（）- 让每个元素的兄弟姐妹在匹配的元素 -
.find（）- 让每个元素的后代在当前匹配的元素 -
的.next（）- 得到紧接着的兄弟在匹配的元素集合中的每个元素 -
preV（）- 获得每个元素的立即preceding兄弟在匹配的元素
I need to extract the details of each column in my table. For example, column "Name/Nr.".
- The table contains a number of addresses
- The very last column of each row has a button that lets a user choose a listed address.
Problem: My code only picks up the first <td> that has a class nr. How do i get this to work?
Here's the jQuery bit:
$(".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:
<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.
Answer
$(".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
});
Now let's focus on some frequently asked questions in such situations.
How to find the closest row?
Using .closest():
var $row = $(this).closest("tr");
Using .parent():
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>
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>
});
Getting a specific <td> value
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>
});
Useful methods
.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
这篇关于jQuery的：一个按钮点击获取表行的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
