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

freeheartsz 2009-10-29 10:08:30

请教大家一个难题,想了很久,没有办法.
假设我在网页中有一个表格是这样:
Item Value
A 5
B 4
C 2

想实施的功能是:
当我载入这个表格时(上面这个表格只是举个例子,实际中这个表格是通过采取数据库生成,行数不固定):
当Value这列的值>4时整个这一行的底色是红色
当Value这列的值>=3 and <=4 时整个这一行的底色是黄色
当Value这列的值<3时整个这一行的底色是绿色

(请指点如何通过JS或CSS实施)
谢谢啊

...全文

54 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

蓝色_冰点 2009-10-30

打赏
举报

<!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>

freeheartsz 2009-10-29

打赏
举报

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

sohighthesky 2009-10-29

打赏
举报

这个虽然是用js来完成的，但是一般是通过在服务器获取数据的时候判断设置的

jol_boy 2009-10-29

打赏
举报



<!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>