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.
