[ACCEPTED]-How to set table cell value using jquery-html

If you just want to iterate over each cell 22 in the table, either of the following will 21 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 20 an array, you're going to have to build 19 an array yourself:

var arr = $('#tbl > tbody > tr').map(function ()
{
    return $(this).children().map(function ()
    {
        return $(this);
    });
});

However, jQuery doesn't 18 expose an API such that you'll (ever) be 17 able to do simple assignment, as in arr[row][col] = 5;. With 16 the above array, this will work:

arr[row][col].text(5);

Demo

Edit

(1) I dont 15 understand $("#tbl").children().children() why 14 the need for the 2nd children

Because jQuery's 13 .children() function only returns a set of the element's 12 immediate descendants, not all descendents (e.g. children 11 + grandchildren + ...).

(2) Why is the 3rd 10 children not a function i.e. children() like 9 the 1st 2.

Because when you use array notation 8 to access elements of a jQuery collection, you 7 get back the underlying DOM element, not 6 a jQuery object. Use .eq(i) instead of [i]:

$("#tbl").children().children().eq(row).children().eq(col).append("sdfasdf");

(3) Why 5 is'nt innerHTML not a function i.e. innerHTML()

As 4 in the answer to your question #2, ...children()[col] returns 3 back a DOM element, not a jQuery object. Most 2 browsers support the DOM element.innerHTML property.

When using .eq(i) instead 1 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");

0

$(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");
        }
     }
});

0

If you simply want to assign a value to 3 all the cells try this:

$(document).ready(function () {
    $("#tbl td").append("sdfasdf");
});

If you want to extract 2 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 1 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 2 the TD's so you know which you're in. You 1 can also just use $('table tr td').append() if it's a static append.