Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Change color of background of row

    Can this be done?
    Change background color a row of depending on cell data on that row. e.g Items
    <table border="1">
    <tr>
    <td><b>Cost</b></td>
    <td><b>Item</b></td>
    </tr>
    <tr>
    <td>12</td>
    <td>hats</td>
    </tr>
    <tr>
    <td>34</td>
    <td>socks</td>
    </tr>
    <tr>
    <td>12</td>
    <td>hats</td>
    </tr>
    <tr>
    <td>12</td>
    <td>hats</td>
    </tr>
    <tr>
    <td>24</td>
    <td>gloves</td>
    </tr>
    </table>
    Any pointers in the right direction please

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by bluesfc2 View Post
    Change background color a row of depending on cell data on that row. e.g Items
    Change background color when? When the user does what? Whenever we are talking about JavaScript, we must precise the users action, because this the essence of JavaScript - it is a client-side dynamic language.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New Coder
    Join Date
    Apr 2011
    Posts
    42
    Thanks
    5
    Thanked 4 Times in 4 Posts
    I think he literally means by the text in the data cells. Which you could do by like...

    Code:
    	var x = document.getElementsByTagName("td");
    	
    	for (i=0; i<x.length; i++){
    		var b = x[i].innerHTML;
    		
    		if (b=="Item"){
    			x[i].style.backgroundColor= "blue"
    		}
    		
    		else if (b=="hats"){
    			x[i].style.backgroundColor= "red"
    		}
    		
    	}
    That would literally set the color of the rows based on their content. But javascript is for functionality. Styling should be done with css, unless the its a style you want changed when the user does something.

    it would be better just to give each cell with the same inside a class with the same name like

    Code:
    <td class="hats">hats</td>
    <td class="socks">socks</td>
    <td class="hats">hats</td>
    then style it with css like:

    Code:
    .hats {
    background-color: red;
    }
    
    .socks {
    background-color: blue;
    }


  •  

    Posting Permissions

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