How to change color of text in a table cell using javascript [Archive]

tan2010

10-10-2011, 06:30 AM

Hi,
I have a php script that displays database data in a web table. I also have a javascript code which is supposed to compare the value entered in a web form to that hard coded in the script and change the color to green if its below, amber if its equal and red if its greater than.
Below is my javascript code:
<script type="text/javascript">

function hallo(){

var value1=200
var inputVal = window.document.getElementById("one").value;

//alert(negNum);
if(inputVal > value1){
window.document.getElementById("color").style.color="red";
}
else
if(inputVal < value1)
{
window.document.getElementById("color").style.color="green";
}
else
if(inputVal == value1)
{
window.document.getElementById("color").style.color="#FF7E00";
}
}

</script>

And below is my php script that displays the data in a web table.

<body>
<form>
Value1: <input type="text" name="one" id="one" > 
Value2: <input type="text" name="two" id="two" value="" onClick="hallo();">
 
Value3: <input type="text" name="three" id="$cell" value="test data">
</form>
<?php
require_once("database.php");
$CustID=$_POST['CustomerID'];

$query="SELECT c.*,r.Meter_No,r.January,r.February,r.March,r.April,r.May,r.June FROM customer AS c,readings AS r WHERE c.CustomerID=r.CustomerID
AND c.CustomerID='".$CustID."'";
$result=mysql_query($query);

$num=mysql_numrows($result);

mysql_close();
?>
<table border="0" cellspacing="2" cellpadding="2">
<tr>
<th>CustomerID</th>
<th>Title</th>
<th>First_Name</th>
<th>Last_Name</th>
<th>Meter_No</th>
<th>January</th>
<th>February</th>
<th>March</th>
<th>April</th>
<th>May</th>
<th>June</th>
</tr>

<?php
$i=0;
while ($i < $num) {

$f1=mysql_result($result,$i,"CustomerID");
$f2=mysql_result($result,$i,"Title");
$f3=mysql_result($result,$i,"First_Name");
$f4=mysql_result($result,$i,"Last_Name");
$f5=mysql_result($result,$i,"Meter_No");
$f6=mysql_result($result,$i,"January");
$f7=mysql_result($result,$i,"February");
$f8=mysql_result($result,$i,"March");
$f9=mysql_result($result,$i,"April");
$f10=mysql_result($result,$i,"May");
$f11=mysql_result($result,$i,"June");
?>

<tr>
<td><?php echo $f1; ?></td>
<td><?php echo $f2; ?></td>
<td><?php echo $f3; ?></td>
<td><?php echo $f4; ?></td>
<td><?php echo $f5; ?></td>
<td id="color"><?php echo $f6; ?></td>
<td id="color"><?php echo $f7; ?></td>
<td id="color"><?php echo $f8; ?></td>
<td id="color"><?php echo $f9; ?></td>
<td id="color"><?php echo $f10; ?></td>
<td id="color"><?php echo $f11; ?></td>
</tr>

<?php
$i++;
}
?>
</body>

As you can see from my javascript, i am getting the elements by id (getElementById("color")).
Currently, only the first <td> with id='color' is changing when the value is entered.
How do I make the text in other table cells with id='color' change color when the comparison value is entered?

tan2010

10-31-2011, 10:33 AM

I have tried you advise but it ain't working. Is the code below the same as what you meant by me appending the id?<script type="text/javascript">

function hallo(){

var value1=200
var inputVal = window.document.getElementById("one").value;
//alert(negNum);
if(inputVal > value1){
window.document.getElementById("color01,color02,color03,color04,color05,color06").style.color="red";
}
else
if(inputVal < value1)
{
window.document.getElementById("color01,color02,color03,color04,color05,color06").style.color="green";
}
else
if(inputVal == value1)
{
window.document.getElementById("color01,color02,color03,color04,color05,color06").style.color="#FF7E00";
}
}
If this is what you meant, then its not successful. Kindly advise me on how to use the class element because am not very good in JS.