How to set table cell value using jquery

Question

I would like to set the value of all table cells, iterating through them. Ideally, I would like to access an Html table, for example, ie $("#tbl")[row][col]="5" array

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

It works, but I don’t know why !!!

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

• Why is'nt innerHTML not a function ie 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, one of the following actions will be performed:

 $('#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 as an array, you have to build the array yourself:

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

However, jQuery does not provide an API so that you (ever) can perform a simple assignment, as in arr[row][col] = 5; . With the array above, this will work:

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

Demo

---

Edit

(1) I do not understand $ ("# tbl"). children (). children () why for a 2nd child is required

Since the jQuery .children() function returns only a set of elements of immediate descendants, and not all descendants (for example, children + grandchildren + ...).

(2) Why the 3rd child is not a function, i.e. children (), as the 1st 2.

Because when using array notation to access jQuery collection items, you are returning the underlying DOM element, not the jQuery object. Use .eq(i) instead of [i] :

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

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

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

When using .eq(i) instead of [i] as described above, use the .html() jQuery function.

Answer 2

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

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

Answer 4

If you just want to assign a value to all cells, try this:

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

If you want to extract cells as a 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"); 

Answer 5

Do you mean 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/

Iterate through the entire TD so you know where you are. You can also just use $('table tr td').append() if it is a static application.