How do you access rows and columns of a HTML table?

Discussion in 'Javascript' started by anonieko, Jul 20, 2005.

  1. anonieko

    anonieko Guest

    This example applies to javascript, table, cells, rows

    <script language="javascript">
    alert('start');
    var tabl = document.getElementById('ordersTable');
    alert( tabl.rows.length);
    var l = tabl.rows.length;
    var i = 0;
    var s = "";
    for (i = 0; i < l; i++ )
    {
    var tr = tabl.rows(i);
    alert(tr);
    alert(tr.cells(0));
    var cll = tr.cells(0);
    alert(cll.innerText);
    s = s + "|" + cll.innerText;
    }
    alert("result=" + s);
    </script>
     
    anonieko, Jul 20, 2005
    #1
    1. Advertisements

  2. anonieko

    RobG Guest

    It is poorly written. Please indent using two or four spaces, it makes
    quoted posts much better to read.
    The language attribute is depreciated, type is required.

    If the intention is to support older browsers, a document.all
    alternative should also be provided - see the group FAQ:

    Why get the length twice? And why not let the user know what the
    alert is for? A better way would be:

    var l = tabl.rows.length;
    alert( 'Number of table rows: ' + l );
    i is given a value here and then again in the for statement. Why do it
    twice? Better to delete the above declaration and put it in the for
    statement.
    for ( var i = 0; i < l; i++ )
    The proper syntax for collections is to use square brackets - round
    brackets are an IE-ism.

    var tr = tabl.rows;
    alert( 'Found ' + tr.nodeName + ' ' + i );
    Two calls are made to the cell where one would do.

    Not all browsers support accessing table cells through the cells
    collection (Safari is one). It is likely better to use the childNodes
    collection:

    var cll = tr.childNodes[0];
    alert( 'Found a ' + cll.nodeName );

    This loop will only get the first cell in each row. Is that the
    intention? The subject indicates access to the columns, not just the
    first column.
    Again, two calls to the element when one would do.

    innerText is supported by IE and very few other browsers. innerHTML
    and a regular expression to strip out HTML tags would do a better job
    (though innerHTML is not a standard). DOM 3's 'Node.textContent' will
    provide a standards-compliant method of extracting the text within a
    node that is similar to innerText, however DOM 3 is not yet widely
    supported:

    <URL:http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#Node3-textContent>

    var ct = cll.innerHTML.replace( /<[^<>]+>/g, '' );
    alert( cll.nodeName + ' contains text ' + ct );

    Why not:

    s += "|" + cll.innerText;


    Here's the full script:


    <table id="ordersTable">
    <tr><td> cell <b>0</b> </td><td> another cell </td></tr>
    <tr><td> cell <b>1</b> </td><td> another cell </td></tr>
    <tr><td> cell <b>2</b> </td><td> another cell </td></tr>
    </table>


    <script type="text/javascript">

    alert('Starting...');
    var tabl = document.getElementById('ordersTable');
    var l = tabl.rows.length;
    alert( 'Number of table rows: ' + l );
    var s = '';
    for ( var i = 0; i < l; i++ )
    {
    var tr = tabl.rows;
    alert( 'Found ' + tr.nodeName + ' ' + i );
    var cll = tr.childNodes[0];
    alert( 'Found a ' + cll.nodeName );
    var ct = cll.innerHTML.replace( /<[^<>]+>/g, '' );
    alert( cll.nodeName + ' contains text: ' + ct );
    s += '|' + cll.innerText;
    }
    alert('result:\n' + s);

    </script>
     
    RobG, Jul 20, 2005
    #2
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.