help me in coloring table cell based on cell value [Archive] - HTML Forums

View Full Version : help me in coloring table cell based on cell value

manju.msrit

06-26-2007, 04:51 AM

hi,
i have a jsp page, in this page i am displaying data retrieved from mysql database. Now the problem is i must color table cell based on cell value. how to implement this.please give me an sample or working code foe this problem.( any code is accepted) preferably html or javascript.
i.e
if cell value is "late" then display that cell in red color
else
display the cell in green color
please help me.

Thanks ad Regards
Akash

Whizzkid

06-26-2007, 06:49 AM

This should be under client side scripting if you want a JS solution, you'd probably get more helpful information there... If you ask me it's easier to do in PHP though...

manju.msrit

06-28-2007, 02:58 AM

hi
thanks for the reply .if you u have the javascript please send me. i am waiting for u r reply.
thank you
manjunath

¥åßßå

06-28-2007, 05:24 AM

Just add the relevant styles to the <td> when you're looping through your data.

A php example :
echo '<td style="background:#'.( $data_item->value == 'late' ? ' f00' : '0f0' ).';color:inherit">'.$data_item->value.'</td>';

A better alternative is to assign a classname and then use css for your styling
echo '<td class="'.( $data_item->value == 'late' ? 'late' : 'ok' ).'">'.$data_item->value.'</td>';

¥

coothead

06-28-2007, 07:33 AM

Hi there manju.msrit,

here is the javascript method...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#table1 {
border:1px solid #999;
}
#table1 td {
width:50px;
height:30px;
border:1px solid #000;
text-align:center;
}
.red {
background-color:#fcc;
}
.green {
background-color:#efe;
}
</style>

<script type="text/javascript">
window.onload=function(){
cell=document.getElementById('table1').getElementsByTagName('td');
for(c=0;c<cell.length;c++) {
if(cell[c].firstChild.nodeValue=='late') {
cell[c].className='red';
}
else {
cell[c].className='green';
}
}
}

</script>

</head>
<body>

<table id="table1"><tr>
<td> </td><td> </td><td>late</td>
</tr><tr>
<td> </td><td> </td><td> </td>
</tr><tr>
<td>late</td><td> </td><td> </td>
</tr></table>

</body>
</html>

¥åßßå

06-29-2007, 11:12 AM

Always better to rely on a server solution though huh? ;)

¥

coothead

06-29-2007, 11:53 AM

Hi there ¥åßßå,
Always better to rely on a server solution though huh? ;)
No argument there. :agree:
The only reason that I posted it, apart from not knowing PHP :supereek:, was that the OP wrote (my translation)...
If (yo)u have the javascript please send (it to) me. I am waiting for (y)u(o) r reply