能否根据单元格的数据动态改变单元格的颜色（50分）,该怎么处理
日期：2014-05-17 浏览次数：20845 次
能否根据单元格的数据动态改变单元格的颜色（50分）
从数据库里获得的数据想用表格显示到页面上来。但显示之前做个校验，比如数字小于5的单元格背景用红色显示，同一列上一行大于下一行的用黄色背景显示，同一列相邻两行数字相差大于100的用蓝色背景显示。
能否用jsp或javascript实现？谢谢
------解决方案--------------------
L@_@K
从数据库里获得的数据想用表格显示到页面上来。但显示之前做个校验，比如数字小于5的单元格背景用红色显示，同一列上一行大于下一行的用黄色背景显示，同一列相邻两行数字相差大于100的用蓝色背景显示。
能否用jsp或javascript实现？谢谢
------解决方案--------------------
L@_@K
- HTML code
<!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> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="Gao YiXiang" />
<meta name="email" content="yixianggao@126.com" />
<meta name="keywords" content="javascript dhtml dom" />
<meta name="description" content="I love web development." />
</head>
<body>
<table border="1" id="tbeTest">
<tr>
<td>11</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>150</td>
<td>6</td>
<td>17</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>211</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>1</td>
</tr>
</table>
<script type="text/javascript">
<!--
var oTable = document.getElementById("tbeTest");
var curRow, floorRow;
var curCell, floorCell;
var curValue, floorValue;
for (var i=0; i<oTable.rows.length-1; i++)
{
curRow = oTable.rows[i];
floorRow = oTable.rows[i+1];
for (var j=0; j<curRow.cells.length; j++)
{
curCell = curRow.cells[j];
curValue = parseInt(curCell.innerText);
floorCell = floorRow.cells[j];
floorValue = parseInt(floorCell.innerText);
// 数字小于5的单元格背景用红色显示。
if (curValue < 5)
{
curCell.style.backgroundColor = "#ff8888";
}
if (i == oTable.rows.length-2 && floorValue < 5)
{
floorCell.style.backgroundColor = "#ff8888";
}
// 同一列上一行大于下一行的用黄色背景显示。
if (curValue > floorValue)
{
curCell.style.backgroundColor = "#ffff00";
}
// 同一列相邻两行数字相差大于100的用蓝色加粗字体显示。
if (Math.abs(curValue-floorValue) > 100)
{
curCell.style.color = "#0000ff";
curCell.style.fontWeight = "bold";
floorCell.style.color = "#0000ff";
floorCell.style.fontWeight = "bold";
}
}
}
//-->
</script>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
