SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    looping thru a table, changing stuff

    HI,

    Is it possible to loop through all the data in a table and, based on a value in a particular cell within each row, perform some kind of operation e.g. change the bground color of the row?

    e.g.

    table shows

    row1 123 001 999
    row2 124 001 999
    row3 125 002 998

    etc.

    based on the above table data would it be possible injavascript to loop thru and change the row bground color if the cell value in the third column = 998 (or whatever)?

    Thanks in advance.

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    1. Get reference to table element.
    2. Loop through TR children
    3. For each one, do getElementsByTagName('td')[2];
    4. Apply style.backgroundColor = 'red' or whatever colour you want to use. Or change its class name

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    complete novice here so please bear with me:

    maybe start by
    var myTable = document.getElementById('tableId');

    but what then? how do I loop thru each row and cell?

    thanks in advance
    Last edited by wellyfish; Mar 18, 2008 at 14:25. Reason: update

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yes, that's a good start. Now, go to http://developer.mozilla.org/docs/Main_Page and search for "getElementsByTagName" (which will help you get the TR elements) and for "for loop" (which is a type of loop that will allow you to loop through said TR elements).

  5. #5
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I'll get stuck into that.

  6. #6
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    floundering a little here.

    I've managed to get so far, but need a little help from here.

    here's my code, nothing happens to the row i.e no changes to the way it's displayed when I run it but I get this:

    Error: rows[rowLoop] has no properties

    in the FF error console

    Code:
    function checkcells() {
    var table = document.getElementById('myTable');
    var rows = document.getElementById('myTable').getElementsByTagName('tr').length;
    var trows = table.rows;
    var rowLoop;
    var chkval;
    
    for( rowLoop=0; rowLoop<rows; rowLoop++) 
    	{
        	var cells = trows[rowLoop].cells;
        	chkval= cells[4].innerHTML;
    		if(chkval < 123)
    			{
    				rows[rowLoop].className = "hilite";
    			}	
       	}
    }
    anyone point out what I'm doing wrong?
    thanks in advance.

  7. #7
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    rows is just going to be number (the number of rows). Get rid of the length bit at the end. Now rows is a collection of all the table's TR elements.

    Create a different variable (e.g. rowsLength) to hold the number of TR elements (using rows.length). Now the second bit in your "for" loop should be rowLoop < rowsLength.

    In the loop, you'll have to replace trows[rowLoop] with rows[rowLoop].

    innerHTML will be a string. If you want to compare it to a number, convert chkval to an integer first:

    Code:
    chkval = Number(cells[4].innerHTML);
    Personally I would use DOM methods instead of innerHTML, i.e.:

    Code:
    chkval = Number(cells[4].firstChild.nodeValue);
    Now, it ought to work!

  8. #8
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Raffles,

    I made the changes you suggested and things are working better. I'm still using the .innerHTML bit as when I tried the .firstChild.nodeValue stuff the Error Console in FF said it 'has no properties'! Also, I'm looking at numbers with 2 decimal places so Ichange dthe Nuymber conversion to simply timesing (is that a word?) the variable by 1.

    So, most of it works. The only bit that doesn't is the:
    Code:
    rows[rowLoop].className = "hilite";
    I know it gets there as I've had alerts in there to show me what's going on.

    Am I referencing the row that I want to change the class of correctly?

    Here's the full code:

    Code:
    function checkcells() {
    var table = document.getElementById('myTable');
    var rows = document.getElementById('myTable').getElementsByTagName('tr');
    var rowsLength=rows.length;
    var rowLoop;
    var chkval=0;
    for( rowLoop=0; rowLoop<rowsLength; rowLoop++) 
    	{
        	var cells = rows[rowLoop].cells;
        	chkval=(cells[4].innerHTML)*1;
    		if(chkval < 0.35)
    			{
    				rows[rowLoop].className = "hilite";
    			}	
       	}
    }
    Thanks again.

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Your example table showed 4 columns.
    because JavaScript indexes starting from 0, shouldn't it be cells[3] that's used to check the 4th column?

    You can also use Number(cells[4].innerHTML) instead of multiplying it.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the example table was purely that, an example. Just to get some guidance on how to do it.

    the problem, currently, is that the code is not changing the 'class' of the table row when it finds the relevant value in a particular cell.

    any help with that greatly received!

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Well the script works for me without any modifications.

    I notice that the script is in a function, which won't run on its own.
    How are you activating the script?


    Appropriate checks are:
    1. Is the script running? Test with an alert inside the script.
    2. Is the style properly declared?

    And if all else fails, show us a simplified example that demonstrates the problem.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all your help guys.

    It's working now.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •