jQuery 如何使用jquery设置表格单元格值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5624704/
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 set table cell value using jquery
提问by David
I would like to set the value of all the cells of a table by iterating through them.
Ideally I would like to access a Html table like an array i.e. $("#tbl")[row][col]="5"
我想通过遍历它们来设置表的所有单元格的值。理想情况下，我想像数组一样访问 Html 表，即$("#tbl")[row][col]="5"
This does not work.
这不起作用。
$(document).ready(function() {
for (var row = 0; row < 3; row++) {
for (var col = 0; col < 3; col++) {
$("#tbl").children().children()[row].children()[col].append("sdfasdf");
}
}
});
This works but I dont know why!!!
这有效，但我不知道为什么！！！
- I dont understand $("#tbl").children().children()why the need for the 2nd children
- Why is the 3rd children not a function i.e. children() like the 1st 2.
Why is'nt innerHTML not a function i.e. innerHTML()
$(document).ready(function() { for (var row = 0; row < 3; row++) { for (var col = 0; col < 3; col++) { $("#tbl").children().children()[row].children[col].innerHTML = "H!"; } } });
- 我不明白 $("#tbl").children() .children()为什么需要第二个孩子
- 为什么第三个孩子不是函数，即 children() 像第一个 2.
为什么不是innerHTML 不是函数，即innerHTML()
$(document).ready(function() { for (var row = 0; row < 3; row++) { for (var col = 0; col < 3; col++) { $("#tbl").children().children()[row].children[col].innerHTML = "H!"; } } });
回答by Matt Ball
If you just want to iterate over each cell in the table, either of the following will work:
如果您只想遍历表中的每个单元格，以下任一方法都可以：
$('#tbl td').each(function ()
{
var $cell = $(this);
// do something with the current <td>
});
// or,
$('#tbl tr').each(function ()
{
var $row = $(this);
$row.children().each(function ()
{
var $cell = $(this);
// do something with the current <tr> and <td>
});
});
If you want to access the table like an array, you're going to have to build an array yourself:
如果你想像数组一样访问表，你将不得不自己构建一个数组：
var arr = $('#tbl > tbody > tr').map(function ()
{
return $(this).children().map(function ()
{
return $(this);
});
});
However, jQuery doesn't expose an API such that you'll (ever) be able to do simple assignment, as in arr[row][col] = 5;. With the above array, this will work:
但是，jQuery 不会公开 API 以便您（永远）能够进行简单的赋值，如arr[row][col] = 5;. 使用上面的数组，这将起作用：
arr[row][col].text(5);
Edit
编辑
(1) I dont understand $("#tbl").children().children() why the need for the 2nd children
(1) 我不明白 $("#tbl").children().children() 为什么需要第二个孩子
Because jQuery's .children()function only returns a set of the element's immediatedescendants, not all descendents (e.g. children + grandchildren + ...).
因为 jQuery 的.children()函数只返回元素的一组直接后代，而不是所有后代（例如，子元素+ 孙子元素+ ...）。
(2) Why is the 3rd children not a function i.e. children() like the 1st 2.
(2) 为什么第三个孩子不是函数，即 children() 像 1st 2。
Because when you use array notation to access elements of a jQuery collection, you get back the underlying DOM element, not a jQuery object. Use .eq(i)instead of [i]:
因为当您使用数组表示法访问 jQuery 集合的元素时，您将返回底层 DOM 元素，而不是 jQuery 对象。使用.eq(i)代替[i]：
$("#tbl").children().children().eq(row).children().eq(col).append("sdfasdf");
(3) Why is'nt innerHTML not a function i.e. innerHTML()
(3) 为什么不是innerHTML 不是函数，即innerHTML()
As in the answer to your question #2, ...children()[col]returns back a DOM element, not a jQuery object. Most browsers support the DOM element.innerHTMLproperty.
正如对问题 #2 的回答一样，...children()[col]返回一个 DOM 元素，而不是一个 jQuery 对象。大多数浏览器都支持 DOMelement.innerHTML属性。
When using .eq(i)instead of [i], as above, use the .html()jQuery function.
当使用.eq(i)代替时[i]，如上所述，使用.html()jQuery 函数。
回答by pconcepcion
You can try with this selector $('#myTable tr:nth-child('+row+') td:nth-child('+col'+)').html("sdfasdf");
你可以试试这个选择器 $('#myTable tr:nth-child('+row+') td:nth-child('+col'+)').html("sdfasdf");
回答by scrappedcola
$(document).ready(function () {
var $rows = $("#tbl").find("tr");
for (var row = 0; row < 3; row++) {
var $columns = $($rows[row]).find("td");
for (var col = 0; col < 3; col++) {
$($columns[col]).append("sdfasdf");
}
}
});
回答by Chandu
If you simply want to assign a value to all the cells try this:
如果您只是想为所有单元格分配一个值，请尝试以下操作：
$(document).ready(function () {
$("#tbl td").append("sdfasdf");
});
If you want to extract the cells as 2 dimensional array:
如果要将单元格提取为二维数组：
$(document).ready(function () {
var rowsNcells = $.map($("#tbl tr"),
function(el, ind){
var row = [];
$("td", el).each(function(){
row.push(el);
});
return row;
});
});
and then somewhere in the code.
然后在代码中的某个地方。
$(rowNcells[1][2]).text("Something");
回答by JohnP
You mean like this?
你的意思是这样？
<table>
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
</table>
var tr = 1;
$('table tr').each(function(){
var td = 1;
$(this).find('td').each(function(){
$(this).append(' | TR : ' + tr + ' TD : ' + td );
td++;
});
tr++;
});
Live demo here : http://jsfiddle.net/8xFFH/
现场演示：http: //jsfiddle.net/8xFFH/
Iterates through all the TD's so you know which you're in. You can also just use $('table tr td').append()if it's a static append.
遍历所有 TD，这样你就知道你在哪个 TD 中。$('table tr td').append()如果它是静态附加，你也可以使用。
