table根据表格内的元素改变行颜色的javascript实现

最新推荐文章于 2022-09-07 18:35:18 发布

weixin_33922670

最新推荐文章于 2022-09-07 18:35:18 发布

阅读量327

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/holyday/p/7908064.html

版权

<script type="text/javascript"> function co(){ var table = document.getElementById("tab"); var len = table.rows.length; var _row = table.rows; for(var i = 0;i < len;i++){ var _cell = _row[i].cells; var d=_cell[3].innerHTML; if(d<3){ table.rows[i].style.backgroundColor = "blue"; } else if(d<18){ table.rows[i].style.backgroundColor = "red"; } else{ table.rows[i].style.backgroundColor = "yellow"; } } } </script>

html

<!DOCTYPE html>  
    <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn"> <head> <title>kingwell</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> html,body{font-family:Arial, Helvetica, sans-serif; font-size:12px} table{ border-collapse:collapse} td,th{padding:5px; border:1px solid #CCC; font-weight:lighter;} th{ cursor:pointer} </style> </head> <body onload="co()"> <table width="400" id="tab"> <thead> <tr> <th width="100" onclick="kw.tabSort('tab',0)">First Name</th> <th width="100" onclick="kw.tabSort('tab',1)">Last Name</th> <th width="100" onclick="kw.tabSort('tab',2,'date')">Date</th> <th width="100" onclick="kw.tabSort('tab',3,'int')">Int</th> </tr> </thead> <tbody> <tr> <td>Kingwell</td> <td>Leng</td> <td>3/10/2012</td> <td>1</td> </tr> <tr> <td>1aJim</td> <td>Green</td> <td>3/5/2012</td> <td>2</td> </tr> <tr> <td>Kate</td> <td>Bin</td> <td>1/2/2012</td> <td>3</td> </tr> <tr> <td>Zte</td> <td>Ri</td> <td>5/3/2012</td> <td>33</td> </tr> <tr> <td>Bee</td> <td>Dd</td> <td>8/1/2012</td> <td>15</td> </tr> </tbody> </table> </body> </html>