Setting color of <td> using DHTML - question

roger v
roger v used Ask the Experts™
on
Hi Experts,

I have a coldfusion page that displays records from a database. Some of these records might be empty, in which case the <td> element is empty with no text in it. I need a way to recognize if a <td> element is empty (does not have any data from the database) and then set the color of that td to red.

I could do this using  a bunch of if statements in coldfusion, but I was wondering if there is a more efficient way of doing this with dhtml/css. I found something online that mentioned a css pseudo class :contains to check the innerText, but I've never done this before and your guidance is needed. tia,

roger
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
you can go through the td's of the table using the following APIs

//if table1 is the id of the table to be check
var table1 = document.getElementById("table1");
var rows = table1.rows;

for ( var rowCounter = 0; rowCounter < rows.length - 1; rowCounter++)
{
   var row = rows[ rowCounter ];
   var cells = row.cells;
   for ( var cellCounter = 0; cellCounter < cells.length - 1; cellCounter++)
   {
       var cell = cells[ cellCounter ];
       if (cell.innerHTML.length == 0 )
       {
             cell.style.backgroundColor = "red";
       }
   }
}
>> I could do this using  a bunch of if statements in coldfusion, but I was wondering if there is a more efficient way of doing this with dhtml/css

Keep in mind, having this style code applied via the DOM (through js) puts a burden on client-side load times/performance as well as limits the style to those who have js turned on. Having a CSS class applied server-side will be the most compatible and performance friendly approach for your visitors.

Moreover, you should really only need one if condition if you're query is done correctly - can you share that code in your query or is that sensitive?
Announcing the Winners!

The results are in for the 15th Annual Expert Awards! Congratulations to the winners, and thank you to everyone who participated in the nominations. We are so grateful for the valuable contributions experts make on a daily basis. Click to read more about this year’s recipients!

Commented:
I agree with level9. Definitely best to do this server side.

cfif len should be all you need.

<tr>
      <td<cfif len(tablecolumn)> style="background:red;"</cfif>>Content</td>
</tr>

Commented:
Oops, should be not len. My bad.

<tr>
      <td<cfif not len(tablecolumn)> style="background:red;"</cfif>>Content</td>
</tr>

Author

Commented:
@level9 & @s8web:

That is the issue - I have over a hundred <td>'s. I'll have to put a cfif on all hundred of them. Is there a way to do it server side in one central location instead of every single <td>?

@gurvinder:

Does that code go in between <style type="text/css"></style> or <script></script> tags?
its a script so it will go in <script></script> tags
>> Is there a way to do it server side in one central location instead of every single <td>?
You could extend how CF parses the code by the might get a bit complicated. A simple solution to start might be just to use 'find and replace' in your editor.
Excuse my grammar/typo above it should read, "You could extend how CF parses the code but that might..."

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial