Can I change the Cell Color based off of a number in it?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • mikemassie
    New Member
    • May 2010
    • 4
    #1

    Can I change the Cell Color based off of a number in it?

    I'm trying to figure out the best way to deal with this problem. I have a select box that populates a table cells using Java / PHP.

    That data that is then returned to the cells is always a number. What I would like to do is color code those cells based off the number that is returned.

    I have search quit a bit for an answer but unable to find a solution on how to accomplish this. There is a ton of help for mouseover,out, onclick etc.. but that isn't what I need.

    Any help is greatly appreciated.
    Tags: None
    • gits
      Recognized Expert Moderator Expert
      • May 2007
      • 5390
      #2
      is the table prepared (filled) serverside or do you request the results with an ajax-call? basically you would just need to assign a css to the cells according to the cells-content ... but in those mentioned cases two different solutions would be appropriate ...

      kind regards

        Comment

        • mikemassie
          New Member
          • May 2010
          • 4
          #3
          results are requested with an ajax call. There is a select box with fluids, then a display table with the results. You can see what I mean here..

            Comment

            • gits
              Recognized Expert Moderator Expert
              • May 2007
              • 5390
              #4
              since you deliver readymade html you would just need to apply a specific css for a tablecell serverside when you create the response ...

                Comment

                • mikemassie
                  New Member
                  • May 2010
                  • 4
                  #5
                  thank you, I really have no idea where to start with that. I'm getting results, then I need to change the color of a cell based on those results. Is this a PHP issue or a Java issue. Here is the code I've wrote so far.

                  getuser.php
                  Code:
                  <html xmlns="http://www.w3.org/1999/xhtml">
<?php
$q=$_GET["q"];

$con = mysql_connect("localhost","xxx","xxx","xxx");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }
mysql_select_db("xxx", $con);

$sql="SELECT * FROM Fluids WHERE id = '".$q."'";

$result = mysql_query($sql);

echo "<table border='1'>
<tr>
<th>Nitrile</th>
<th>HBNR</th>
<th>EPDM</th>
<th>Fluorocarbon</th>
<th>Neoprene</th>
<th>SBR</th>
<th>Polyacrylate</th>
<th>Polyurethane</th>
<th>Butyl</th>
<th>Butadiene</th>
<th>Isoprene</th>
<th>NR</th>
<th>Hypalon</th>
<th>Fluorosilicone</th>
<th>Silicone</th>
<th>Image</th>
</tr>";

while($row = mysql_fetch_array($result))
  {
  echo "<tr align='center'>";
  echo "<td>" . $row['Nitrile'] . "</td>";
  echo "<td>" . $row['HNBR'] . "</td>";
  echo "<td>" . $row['EPDM'] . "</td>";
  echo "<td>" . $row['Neoprene'] . "</td>";
  echo "<td>" . $row['SBR'] . "</td>";
  echo "<td>" . $row['Polyacrylate'] . "</td>";
  echo "<td>" . $row['Polyurethane'] . "</td>";
  echo "<td>" . $row['Butyl'] . "</td>";
  echo "<td>" . $row['Butadiene'] . "</td>";
  echo "<td>" . $row['Isoprene'] . "</td>";
  echo "<td>" . $row['NR'] . "</td>";
  echo "<td>" . $row['Hypalon'] . "</td>";
  echo "<td>" . $row['Fluorosilicone'] . "</td>";
  echo "<td>" . $row['Silicone'] . "</td>";
 // echo "<td>" . $row['Image'] . "</td>";
  echo "</tr>";
  }
echo "</table>";

mysql_close($con);
?> 
</body>
</html>
                  Then the html / java page. get_user.html
                  Code:
                  <html>
<head>
<script type="text/javascript">
function showFluid(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}


</script>
</head>
<body>

<form>
<select name="fluids" size="5" onChange="showFluid(this.value)"><br/>
<option value="1">1-Butene 2-Ethyl</option>
<option value="2">1-Chloro 1-Nitro Ethane</option>
<option value="3">AN-O-3 Grade M</option>
<option value="4">AN-O-6</option>
<option value="5">AN-VV-O-366b Hydr. Fluid</option>
<option value="6">ASTM Oil, No.1</option>
<option value="7">ASTM Oil, No.2</option>
<option value="8">ASTM Oil, No.3</option>

</select>
</form>
<br />
<div id="txtHint"> Here
</div>

</body>
</html>
                  I understand how to make a CSS but not sure how to switch styles based off of the results. Any help or reference you can provide I would really appreciate.

                    Comment

                    • gits
                      Recognized Expert Moderator Expert
                      • May 2007
                      • 5390
                      #6
                      JavaScript has nothing to do with Java ... those are completely different things.

                      the easiest way would be to echo an additional style for a tablecell in your php-script ... just do that conditionally depending on your requirements ...

                        Comment

                        • mikemassie
                          New Member
                          • May 2010
                          • 4
                          #7
                          Thank you for the help! I think I have got it now.

                            Comment

                            Previous template Next
                            Working...