How to set table cell value using jquery
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"
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!"; } } });
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:
arr[row][col].text(5);
Demo
Edit
(1) I dont understand $("#tbl").children().children() why the need for the 2nd children
Because jQuery's .children()
function only returns a set of the element's immediate descendants, not all descendents (e.g. children + grandchildren + ...).
(2) Why is the 3rd children not a function i.e. children() like the 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]
:
$("#tbl").children().children().eq(row).children().eq(col).append("sdfasdf");
(3) Why is'nt innerHTML not a function i.e. 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.innerHTML
property.
When using .eq(i)
instead of [i]
, as above, use the .html()
jQuery function.
You can try with this selector $('#myTable tr:nth-child('+row+') td:nth-child('+col'+)').html("sdfasdf");
$(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");
}
}
});
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");
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/
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.
精彩评论