我需要提取我的表中的每一列的详细信息。 例如，列 “名称/ 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()
var $row = $(this).closest("tr");
使用.parent()
您也可以使用上移DOM树.parent()方法。 这只是一个有时与一起使用的备选.prev()和.next()
var $row = $(this).parent() // Moves up from <button> to <td>
.parent(); // Moves up from <td> to <tr>
让所有的表格单元<td>值
因此，我们有我们的$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>值
类似以前的一个，但是我们可以指定孩子的指数<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() -获取的选择相匹配的第一个元素 -
.parent() -得到每个元素的父在当前匹配的元素 -
.parents() -获得的各元素的祖先在当前匹配的元素 -
.children() -获取每个元素的孩子在匹配的元素 -
.siblings() -获得的各元素的兄弟姐妹中匹配的元素集合的 -
.find() -得到每个元素的后代在当前匹配的元素 -
.next() -获取后立即各元素的同级集合中匹配的元素 -
.prev() -获得的各元素的紧接在前的兄弟集合中的匹配元素的
你需要改变你的代码，以寻找与该被点击的按钮行。 试试这个：
$(".use-address").click(function() {
var id = $(this).closest("tr").find(".nr").text();
$("#resultas").append(id);
});
例如拨弄
试试这个：
$(".use-address").click(function() {
$(this).closest('tr').find('td').each(function() {
var textval = $(this).text(); // this will be the text of each <td>
});
});
这将找到最接近tr当前点击的按钮（通过DOM往上走），然后每次循环的td -你可能希望创建与值的字符串/数组。
例如这里
获取使用此数组例如完整的地址
选择".nr:first"是专门寻找第一，只有第一，具有元素类"nr"所选择的表元素中。 如果改为调用.find(".nr")您将得到所有上课的表内的元素的"nr" 。 一旦你拥有所有这些元素，你可以使用。每个方法循环他们。 例如：
$(".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元素表中，而不仅仅是一个被点击了排。 为了进一步限制您的选择包含点击的按钮行，使用.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
});
});
function useAdress () {
var id = $("#choose-address-table").find(".nr:first").text();
alert (id);
$("#resultas").append(id); // Testing: append the contents of the td to a div
};
然后在您的按钮：
onclick="useAdress()"
找到ID元素使用jQuery的排
$(document).ready(function () {
$("button").click(function() {
//find content of different elements inside a row.
var nameTxt = $(this).closest('tr').find('.name').text();
var emailTxt = $(this).closest('tr').find('.email').text();
//assign above variables text1,text2 values to other elements.
$("#name").val( nameTxt );
$("#email").val( emailTxt );
});
});
var values = [];
var count = 0;
$("#tblName").on("click", "tbody tr", function (event) {
$(this).find("td").each(function () {
values[count] = $(this).text();
count++;
});
});
现在值阵列包含该行的所有单元格的值可以像点击行的值[0]的第一单元格的值被用于
下面是委托的简单例子的完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Striped Rows</h2>
<p>The .table-striped class adds zebra-stripes to a table:</p>
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>click</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
<td>click</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
<td>click</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function(){
$("div").delegate("table tbody tr td:nth-child(4)", "click", function(){
var $row = $(this).closest("tr"), // Finds the closest row <tr>
$tds = $row.find("td:nth-child(2)");
$.each($tds, function() {
console.log($(this).text());
var x = $(this).text();
alert(x);
});
});
});
</script>
</div>
</body>
</html>
