By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,287 Members | 1,545 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,287 IT Pros & Developers. It's quick & easy.

How to use javascript to change text color in a table cell

P: 1
Hi,
Am developing a web page which is supposed to display database contents based on search made using customer ID.
The results of the search is displayed in an HTML table.This is working fine.
I would like to use JavaScript on this page to dynamically change the colour of the numerical values in the table to
show if they are above or below the target value entered by the user in a text box on the page. Those
below should be shown in green and those above in red (identical values may be shown in amber).
My code is as shown below:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Search Script</title>
  5.  
  6. <script type="text/javascript">
  7.  
  8. function hallo(){
  9.  
  10. var value1=200
  11. var inputVal = window.document.getElementById("one").value;
  12. //alert(negNum);
  13. if(inputVal > value1){
  14. window.document.getElementById("color").style.color="red";
  15. }
  16. else
  17. if(inputVal < value1)
  18. {
  19. window.document.getElementById("color").style.color="green";
  20. }
  21. else
  22. if(inputVal == value1)
  23. {
  24. window.document.getElementById("color").style.color="#FF7E00";
  25. }
  26. }
  27.  
  28. </script>
  29.  
  30. </head>
  31. <body>
  32. <form>
  33. Value1: <input type="text" name="one" id="one" ><br/>
  34. Value2: <input type="text" name="two" id="two" value="" onClick="hallo();">
  35. <br/>
  36. Value3: <input type="text" name="three" id="$cell" value="test data">
  37. </form>
  38. <table width="400" border="0" align="center" cellpadding="0" cellspacing="1">
  39. <tr>
  40. <td><form name="form2" method="post" action="">
  41. <table width="100%" border="0" cellspacing="2" cellpadding="5">
  42.  
  43. <tr>
  44. <td colspan="20"><strong>Please Enter Customer ID to Display Historical Meter Readings </strong></td>
  45. </tr>
  46. <tr >
  47. <td width="71">CustomerID</td>
  48. <td width="6">:</td>
  49. <td ><input type="text" name="CustomerID" id="CustomerID"></td>
  50. </tr>
  51.  
  52. <tr>
  53. <td colspan="6" align="center" id=''><input type="submit" name="Submit" value="Submit"> </td>
  54. </tr>
  55. </table>
  56. <?php
  57. require_once("database.php");
  58.  
  59. $CustID=$_POST['CustomerID'];
  60.  
  61. $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
  62. AND c.CustomerID='".$CustID."'";
  63. $result=mysql_query($query);
  64.  
  65. $num=mysql_numrows($result);
  66.  
  67. mysql_close();
  68. ?>
  69. <table border="0" cellspacing="2" cellpadding="2" >
  70. <tr>
  71. <th><font face="Arial, Helvetica, sans-serif">CustomerID</font></th>
  72. <th><font face="Arial, Helvetica, sans-serif">Title</font></th>
  73. <th><font face="Arial, Helvetica, sans-serif">First_Name</font></th>
  74. <th><font face="Arial, Helvetica, sans-serif">Last_Name</font></th>
  75. <th><font face="Arial, Helvetica, sans-serif">Meter_No</font></th>
  76. <th><font face="Arial, Helvetica, sans-serif">January</font></th>
  77. <th><font face="Arial, Helvetica, sans-serif">February</font></th>
  78. <th><font face="Arial, Helvetica, sans-serif">March</font></th>
  79. <th><font face="Arial, Helvetica, sans-serif">April</font></th>
  80. <th><font face="Arial, Helvetica, sans-serif">May</font></th>
  81. <th><font face="Arial, Helvetica, sans-serif">June</font></th>
  82. </tr>
  83.  
  84. <?php
  85. $i=0;
  86. while ($i < $num) {
  87.  
  88. $f1=mysql_result($result,$i,"CustomerID");
  89. $f2=mysql_result($result,$i,"Title");
  90. $f3=mysql_result($result,$i,"First_Name");
  91. $f4=mysql_result($result,$i,"Last_Name");
  92. $f5=mysql_result($result,$i,"Meter_No");
  93. $f6=mysql_result($result,$i,"January");
  94. $f7=mysql_result($result,$i,"February");
  95. $f8=mysql_result($result,$i,"March");
  96. $f9=mysql_result($result,$i,"April");
  97. $f10=mysql_result($result,$i,"May");
  98. $f11=mysql_result($result,$i,"June");
  99. ?>
  100.  
  101. <tr>
  102. <td><font face="Arial, Helvetica, sans-serif"><?php echo $f1; ?></font></td>
  103. <td><font face="Arial, Helvetica, sans-serif"><?php echo $f2; ?></font></td>
  104. <td><font face="Arial, Helvetica, sans-serif"><?php echo $f3; ?></font></td>
  105. <td><font face="Arial, Helvetica, sans-serif"><?php echo $f4; ?></font></td>
  106. <td><font face="Arial, Helvetica, sans-serif"><?php echo $f5; ?></font></td>
  107. <td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f6; ?></font></td>
  108. <td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f7; ?></font></td>
  109. <td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f8; ?></font></td>
  110. <td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f9; ?></font></td>
  111. <td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f10; ?></font></td>
  112. <td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f11; ?></font></td>
  113. </tr>
  114.  
  115. <?php
  116. $i++;
  117. }
  118. ?>
  119. </body>
  120. </html>
Currently only one value in the table cell is able to change color.
How do I make the remaining values also change color depending on the user input?
Oct 26 '11 #1
Share this Question
Share on Google+
1 Reply


100+
P: 1,059
instruction is like this
Expand|Select|Wrap|Line Numbers
  1. obj.style.color='blue';
  2.  
Oct 27 '11 #2

Post your reply

Sign in to post your reply or Sign up for a free account.