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

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

    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:
    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.
    Code:
    <body>
    <form>
    Value1: <input type="text" name="one" id="one" ><br/>
    Value2: <input type="text" name="two" id="two" value="" onClick="hallo();">
    <br/>
    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><font face="Arial, Helvetica, sans-serif">CustomerID</font></th>
    <th><font face="Arial, Helvetica, sans-serif">Title</font></th>
    <th><font face="Arial, Helvetica, sans-serif">First_Name</font></th>
    <th><font face="Arial, Helvetica, sans-serif">Last_Name</font></th>
    <th><font face="Arial, Helvetica, sans-serif">Meter_No</font></th>
    <th><font face="Arial, Helvetica, sans-serif">January</font></th>
    <th><font face="Arial, Helvetica, sans-serif">February</font></th>
    <th><font face="Arial, Helvetica, sans-serif">March</font></th>
    <th><font face="Arial, Helvetica, sans-serif">April</font></th>
    <th><font face="Arial, Helvetica, sans-serif">May</font></th>
    <th><font face="Arial, Helvetica, sans-serif">June</font></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><font face="Arial, Helvetica, sans-serif"><?php echo $f1; ?></font></td>
    <td><font face="Arial, Helvetica, sans-serif"><?php echo $f2; ?></font></td>
    <td><font face="Arial, Helvetica, sans-serif"><?php echo $f3; ?></font></td>
    <td><font face="Arial, Helvetica, sans-serif"><?php echo $f4; ?></font></td>
    <td><font face="Arial, Helvetica, sans-serif"><?php echo $f5; ?></font></td>
    <td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f6; ?></font></td>
    <td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f7; ?></font></td>
    <td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f8; ?></font></td>
    <td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f9; ?></font></td>
    <td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f10; ?></font></td>
    <td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f11; ?></font></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?

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Quote Originally Posted by tan2010 View Post
    How do I make the text in other table cells with id='color' change color when the comparison value is entered?
    This is where your mistake is. There must not be more than one element on a page with the same id attribute. Either you append a variable part to the id attribute (like color01, color02 etc.) or you should use "class" instead.

  • Users who have thanked devnull69 for this post:

    tan2010 (10-31-2011)

  • #3
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?
    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("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.


  •  

    Posting Permissions

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