How To Set Table Cell Value Using Jquery

April 21, 2024 Post a Comment

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 doe

Solution 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.

Solution 2:

You can try with this selector $('#myTable tr:nth-child('+row+') td:nth-child('+col'+)').html("sdfasdf");

Solution 3:

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

Solution 4:

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");

Solution 5:

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.

Html5 News