大困惑:表格底色随表格值而变化

请教大家一个难题,想了很久,没有办法.
假设我在网页中有一个表格是这样:
Item Value
A 5
B 4
C 2想实施的功能是:
当我载入这个表格时(上面这个表格只是举个例子,实际中这个表格是通过采取数据库生成,行数不固定):
当Value这列的值>4时整个这一行的底色是红色
当Value这列的值>=3 and <=4 时整个这一行的底色是黄色
当Value这列的值<3时整个这一行的底色是绿色(请指点如何通过JS或CSS实施)
谢谢啊

解决方案 »

  1.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
     </HEAD>
     <BODY>
      <TABLE id="tbl" >
      <TR>
    <TD>4</TD>
    <TD>5</TD>
    <TD>6</TD>
      </TR>
      <TR>
    <TD>3</TD>
    <TD>2</TD>
    <TD>4</TD>
      </TR>
      </TABLE>
     </BODY>
    </HTML>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var tdArr = document.getElementsByTagName("TD");
    for(var i=0;i<tdArr.length;i++)
    {
    if(parseInt(tdArr[i].innerHTML)>4)
    {
    tdArr[i].style.background="red";
    }
    else if(parseInt(tdArr[i].innerHTML)>=3 && parseInt(tdArr[i].innerHTML)<=4)
    {
    tdArr[i].style.background="yellow";
    }else if(parseInt(tdArr[i].innerHTML)<3)
    {
    tdArr[i].style.background="green";
    }
    }

    //-->
    </SCRIPT>
      

  2.   

    非常感激jol_boy.
    有一个问题麻烦再指点一下.
    我需要的效果是:
    只对Value这一列的值进行判断,当该列的值符合条件时,这个值所在的整个一行的颜色进行改变
      

  3.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body>
    <table id="grid" border="1">
        <tr><th>Item</th><th>Value</th></tr>
        <tr><td>A</td><td>5</td></tr>
        <tr><td>B</td><td>4</td></tr>
        <tr><td>C</td><td>2</td></tr>
    </table>
    <script language="javascript" type="text/javascript">
        var table = document.getElementById("grid");
        var rows = table.rows;
        for (var i = 0; i < rows.length; i++) {
            var row = rows[i];
            var value=parseInt( row.cells[1].innerHTML);
            if (value > 4) {
                row.style.backgroundColor = "red";
            }
            else if (value >= 3 && value <= 4) {
                row.style.backgroundColor = "yellow";
            }
            else if (value < 3) {
                row.style.backgroundColor = "green";
            }
        }
    </script>
    </body>
    </html>