javascript: looping through all cells in table

Question

i'm trying to loop through all the cells in a table and do a comparison on the value.

            var table = document.getElementById("assignedvlans");
            alert(table);
            alert($('#assignedvlans tbody tr').length);
            for (var i = 0, cell; cell = table.cells[i]; i++) {
                 //iterate through all cells in table.
                 alert('in the loop');
                 alert(cell.val());
                 if (cell.val == IdforVlanToAdd)
                 {
                    alert('This vlan is already associated with the port.');
                    $bexit = true;
                    break;
                 }                  
            }

When i test this code, the alert(table) code is working - it returns "object HTMLTableElement" and the alert for the table lengths returns 4, which is also correct. But the alert statements inside the loop never happen. Can you tell me where i'm going wrong with the loop control? Thanks.

Answer 1

table contains rows[] , which themselves contain cells[] . You can't get the cells[] directly from the table .

You could use table.getElementsByTagName('td') as a shortcut, provided there are no nested tables.

Otherwise, you should loop through each of the rows[] and in that loop you can loop through the cells[] .

var table = document.getElementById('assignedvlans'),
    rows = table.rows, rowcount = rows.length, r,
    cells, cellcount, c, cell;
for( r=0; r<rowcount; r++) {
    cells = rows[r].cells;
    cellcount = cells.length;
    for( c=0; c<cellcount; c++) {
        cell = cells[c];
        // now do something.
    }
}

Answer 2

Try like this :

        var $table = $('#assignedvlans tbody td');
        $.map($table,function(){
             if ($(this).text() == IdforVlanToAdd)
             {
                alert('This vlan is already associated with the port.');
                return;
             }   
        });

Answer 3

The reason you're not getting any alerts inside the loop is your for loop is not structured correctly. It quits immediately because the assignment cell = table.cells[i] returns false.

Answer 4

var myDataArr = [];
$('#dynamic_cards tr').each(function(){
    $(this).find('td').each(function(){
        myDataArr.push($(this).text());
    });
});
console.log(myDataArr);