我需要提取表中每列的详细信息。例如,列“名称/编号”。
问题: 我的代码仅选择<td>具有类的第一个nr。我该如何工作?
<td>
nr
这是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>
练习的目的是找到包含信息的行。当我们到达那里时,我们可以轻松提取所需的信息。
$(".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 });
现在,让我们集中讨论这种情况下的一些常见问题。
使用.closest():
.closest()
var $row = $(this).closest("tr");
使用.parent():
.parent()
您也可以使用.parent()方法将DOM树向上移动。这只是有时与.prev()和一起使用的替代方法.next()。
.prev()
.next()
var $row = $(this).parent() // Moves up from <button> to <td> .parent(); // Moves up from <td> to <tr>
因此,我们有我们$row想要输出表格单元格文本的方法:
$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> });
.parents()
.children()
.siblings()
.find()