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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    detecting tds of a certain table

    Hello,

    I would to change the color of some td cells if there is text in it.
    Right now this code does the job, but it changes the color of evry table.
    I'd like to know a way to do this on one table in my page and not all of them.

    Code:
    var count='0';   
    var TDs=document.getElementsByTagName('td')
    var length=TDs.length;
    i='0';
    while(i<length){
       if (TDs[i].innerHTML != '') {
          TDs[i].style.backgroundColor = "white";
          count++;
       }
       i++;
    }

  • #2
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    Here ya go:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Test</title>
    <script type="text/javascript">
    // <![CDATA[
    
    function changeEmptyTDBG(table,color)
    	{
    	var tds = table.getElementsByTagName("td");
    	for (var i=0;i<tds.length;i++)
    		{
    		if (!tds[i].innerHTML) tds[i].style.backgroundColor = color;
    		}
    	}
    
    window.onload = function()
    	{
    	changeEmptyTDBG(document.getElementById("table1"),"red");
    	}
    
    // ]]>
    </script>
    </head>
    <body>
    
    <table id="table1">
    	<tr>
    		<th>Col 1</th>
    		<th>Col 2</th>
    		<th>Col 3</th>
    		<th>Col 4</th>
    	</tr>
    	<tr>
    		<td>stuff</td>
    		<td></td>
    		<td>stuff</td>
    		<td></td>
    	</tr>
    	<tr>
    		<td>more stuff</td>
    		<td>more stuff</td>
    		<td></td>
    		<td>more stuff</td>
    	</tr>
    </table>
    
    <br />
    
    <table id="table2">
    	<tr>
    		<th>Col 1</th>
    		<th>Col 2</th>
    		<th>Col 3</th>
    		<th>Col 4</th>
    	</tr>
    	<tr>
    		<td>stuff</td>
    		<td>stuff</td>
    		<td>stuff</td>
    		<td>stuff</td>
    	</tr>
    	<tr>
    		<td>more stuff</td>
    		<td>more stuff</td>
    		<td>more stuff</td>
    		<td>more stuff</td>
    	</tr>
    </table>
    
    </body>
    </html>
    Essentially you just need a reference to the table in question (in the above case I used its id attribute) and replace "document" with that reference.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • Users who have thanked itsallkizza for this post:

    LuckBox (06-26-2009)

  • #3
    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
    I would have rather used a RegExp test, in case the cells are structured like:
    Code:
    <td>
    </td>
    ...or ...
    <td>  </td>
    so that the following will cover all the possibilities:
    Code:
    if (!/\S+/.test(tds[i].innerHTML)) tds[i].style.backgroundColor = color;
    Last edited by Kor; 06-26-2009 at 04:10 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thank you, it works now!


  •  

    Posting Permissions

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