首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

能否根据单元格的数据动态改变单元格的颜色(50分),该怎么处理

2012-02-08 
能否根据单元格的数据动态改变单元格的颜色(50分)从数据库里获得的数据想用表格显示到页面上来。但显示之前

能否根据单元格的数据动态改变单元格的颜色(50分)
从数据库里获得的数据想用表格显示到页面上来。但显示之前做个校验,比如数字小于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> 

热点排行