How to set table cell value using jquery

Question

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!!!

1. I dont understand $("#tbl").children().children() why the need for the 2nd children
2. Why is the 3rd children not a function i.e. children() like the 1st 2.

3. 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!";
           }
       }
   });
   

Answer 1

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.