Javascript 如何在javascript函数中获取表的所有td值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28959416/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get all the td values of a Table in a javascript function
提问by lucifer
I have a datatable in which i am showing child rows expand collapse functionality.It is working well but i want to get the contents of last td of a table.For now i have create a function which is placing some hard coded value in the datatable expanded place . In that place i want to get those td values. !
我有一个数据表，我在其中显示子行展开折叠功能。它运行良好，但我想获取表的最后一个 td 的内容。现在我创建了一个函数，它在数据表中放置了一些硬编码值扩大的地方。在那个地方，我想获得那些 td 值。！
Here is the code i am posting
这是我发布的代码
<html>
<head>
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.5/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/1.0.4/css/dataTables.responsive.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/responsive/1.0.4/js/dataTables.responsive.min.js"></script>
</head>
<body>
<style type="text/css">
td.details-control {
background: url('http://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('http://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
}
</style>
<script type="text/javascript" class="init">
/* Formatting function for row details - modify as you need */
function format ( d ) {
var v;
$("#example tbody tr").each(function() {
// Within tr we find the last td child element and get content
v = $(this).find("td:last-child").html();
return v;
});
// Within tr we find the last td child element and get content
//alert($(this).find("td:last-child").html());
return '<fieldset> <legend> </legend> <table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>'+v+'</td>'
'</tr>'
'</table> </fieldset>'
}
$(document).ready(function() {
var table = $('#example').DataTable();
// Add event listener for opening and closing details
$('#example tbody ').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
console.log(row);
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
} );
// End add event
$("#divPopUp").dialog({
resizable: true,
autoOpen: false,
width: 550,
modal: true,
buttons: {
"Save": function() {
var text = $(this).find( ":checkbox:checked" ).map(function() {
return this.value+' ';
}).get().join();
var obj = $(this).data("opener");
$(obj).parents('td:first').siblings(':eq(2)').find(':text').val(text);
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close:function(){
$(this).find( ":checkbox" ).removeAttr('checked');
$( this ).dialog( "close" );
}
});
$('button.btn').on('click', function(){
var title = $(this).parents('td:first').siblings(':eq(0)').text();
console.log("title is : " + title);
$( "#divPopUp" ).data('opener', this).dialog( "option", "title", title ).dialog( "open" );
var text = $(this).parents('td:first').siblings(':eq(2)').find(':input').val();
if($.trim(text) != ''){
var texts = text.split(" ,");
$.each(texts, function(i, value){ $("#divPopUp").find(':checkbox[value="'+$.trim(value)+'"]').prop('checked', true);
});
}
});
} );
</script>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td class="details-control" ></td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>0,800</td>
</td>
</tr>
<tr>
<td class="details-control" ></td>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>0,750</td>
</td>
</tr>
<tr>
<td class="details-control" ></td>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>,000</td>
</td>
</tr>
</tbody>
</table>
Inside that format function i want to get all td values of datatables.Somebody please help
在该格式函数中，我想获取数据表的所有 td 值。有人请帮忙
回答by Ruddy
I did it in jQuery, as you have your last tdof each row as nothing I deleted them to show it works using the salary column.
我是在 jQuery 中完成的，因为你有td每一行的最后一行，因为我没有删除它们以显示它使用工资列工作。
This gets the value of each row's last td, in the function you can do whatever you want to the values.
这将获取每一行的 last 的值td，在该函数中，您可以对这些值执行任何操作。
// Run function for each tbody tr
$("#example tbody tr").each(function() {
// Within tr we find the last td child element and get content
alert($(this).find("td:last-child").html());
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td class="details-control"></td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>0,800</td>
</tr>
<tr>
<td class="details-control"></td>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>0,750</td>
</tr>
<tr>
<td class="details-control"></td>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>,000</td>
</tr>
</tbody>
</table>回答by Amit
I tried with jquery.
我试过jquery。
Code:
代码：
$('#example tr td:last-child').each(function () {
console.log($(this).html());
});
Try this code hopefully this code work's for you.
试试这个代码希望这个代码适合你。
回答by jherax
Gets the collection of matched elements: last <td> in all rows:
获取匹配元素的集合：所有行中的最后一个 <td>：
var last_col = $("#example tbody tr td:last-child");
Now you can get the <td> values as an array of numbers (jQuery.map()or Array.prototype.map()):
现在您可以将 <td> 值作为数字数组（jQuery.map()或Array.prototype.map()）获取：
var values = $.map(last_col.get(), function (td) {
return +$(td).text().replace(/[$\,\s]/g, "") || 0;
});
Bonus: If you want sum (or operate) each values in the array (from left-to-right), you can use Array.prototype.reduce()
奖励：如果你想对数组中的每个值求和（或操作）（从左到右），你可以使用Array.prototype.reduce()
var total = values.reduce(function (prev, current) {
return prev + current;
}, 0 /*starts prev*/);
You can run this code here: https://jsfiddle.net/4kw6yco7/
您可以在此处运行此代码：https: //jsfiddle.net/4kw6yco7/
回答by Subho
Say You want a whole data of a row then
说你想要一行的完整数据然后
var row = '<tr>' + '<td id="tduid">' + value['uid'] + '</td>' + '<td>' + value['name'] + '</td>' + '<td>' + value['address'] + '</td>' + '<td>' + tags + '</td>' + '<td>' + '<button class="deleteUser btn btn-danger" type="submit" id="del">Edit</button>' + '</td></tr>';
You need the values of this row. So next,
您需要此行的值。那么接下来，
$('#del').click(function(e) {
var tuid = $(this).closest('tr').find('#tduid').text();
alert(tuid);
});
