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