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

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

  1. Guest

    This example applies to javascript, table, cells, rows
    >
    > How do you access rows and columns of a HTML table?
    >
    >
    >



    <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>
     
    , Jul 20, 2005
    #1
    1. Advertising

  2. RobG Guest

    wrote:
    > This example applies to javascript, table, cells, rows


    It is poorly written. Please indent using two or four spaces, it makes
    quoted posts much better to read.

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

    >
    >
    > <script language="javascript">


    The language attribute is depreciated, type is required.

    <script type="text/javascript">

    > alert('start');
    > var tabl = document.getElementById('ordersTable');


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

    <URL:http://www.jibbering.com/faq/#FAQ4_15>

    > alert( tabl.rows.length);
    > var l = tabl.rows.length;


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

    > var i = 0;


    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.

    > var s = "";
    > for (i = 0; i < l; i++ )


    for ( var i = 0; i < l; i++ )

    > {
    > var tr = tabl.rows(i);


    The proper syntax for collections is to use square brackets - round
    brackets are an IE-ism.

    var tr = tabl.rows;

    > alert(tr);


    alert( 'Found ' + tr.nodeName + ' ' + i );

    > alert(tr.cells(0));
    > var cll = tr.cells(0);


    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.

    > alert(cll.innerText);


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


    > s = s + "|" + cll.innerText;


    Why not:

    s += "|" + cll.innerText;


    > }
    > alert("result=" + s);
    > </script>
    >



    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>




    --
    Rob
     
    RobG, Jul 20, 2005
    #2
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Subba Rao via DotNetMonster.com

    script for moving rows up and down and traverse thru rows of HTML table

    Subba Rao via DotNetMonster.com, Mar 19, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    8,316
    Subba Rao via DotNetMonster.com
    Mar 19, 2005
  2. helpful sql
    Replies:
    0
    Views:
    839
    helpful sql
    May 19, 2005
  3. Jukka K. Korpela

    Re: table columns and rows in css?

    Jukka K. Korpela, Aug 31, 2003, in forum: HTML
    Replies:
    0
    Views:
    384
    Jukka K. Korpela
    Aug 31, 2003
  4. Rio
    Replies:
    4
    Views:
    1,228
  5. T.G.
    Replies:
    2
    Views:
    1,152
Loading...

Share This Page