如何使用原生js和jQuery实现表格的隔行变色,原生js实现表格隔行变色:利用原生js操作DOM元素。
HTML:。
<!DOCTYPE HTML> <html> <head> <title>1. 使用节点树方式实现表格偶数行变色</title> <meta charset="utf-8" /> <link rel="stylesheet" href="css/3.css" /> <!--引入jQuery文件--> <script src="./js/jquery-3.1.0.min.js"></script> <style>.blue {background-color: #ccccff;}</style> </head> <body> <table id="data"> <thead> <tr> <th>姓名</th> <th>工资</th> <th>入职时间</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>Tom</td> <td>$3500</td> <td>2010-10-25</td> <td><a href="javascript:void(0)" onclick="fun(this)">删除</a></td> </tr> <tr> <td>Mary</td> <td>$3400</td> <td>2010-12-1</td> <td><a href="javascript:void(0)" onclick="fun(this)">删除</a></td> </tr> <tr> <td>King</td> <td>$5900</td> <td>2009-08-17</td> <td><a href="javascript:void(0)" onclick="fun(this)">删除</a></td> </tr> <tr> <td>Scott</td> <td>$3800</td> <td>2012-11-17</td> <td><a href="javascript:void(0)" onclick="fun(this)">删除</a></td> </tr> <tr> <td>Smith</td> <td>$3100</td> <td>2014-01-27</td> <td><a href="javascript:void(0)" onclick="fun(this)">删除</a></td> </tr> <tr> <td>Allen</td> <td>$3700</td> <td>2011-12-05</td> <td><a href="javascript:void(0)" onclick="fun(this)">删除</a></td> </tr> </tbody> </table> </body> </html>
CSS样式:
#data { width: 600px; } #data, td, th { border-collapse: collapse; border: 1px solid #aaaaaa; } th, td { height: 28px; } #data thead { background-color: #333399; color: #ffffff; }
原生js:
<script type="text/javascript"> //根据id号查找到当前的表格 var table=document.getElementById("data"); //因为隔行变色不需要头部变色,所以在表格的下面又找到表格的tbody,因为一个表格可以有多个tbody所以要给它添加下标,找到第一个tbody。 var tbody=table.getElementsByTagName("tbody")[0]; //再找到tbody里面所有的tr标签 var trs=tbody.getElementsByTagName("tr"); //使用for循环遍历所有的tr for(var i=0;i
利用jQuery实现隔行变色就要简单很多了(使用jQuery时要引入jQuery文件哦!):
<script type="text/javascript"> $("#data>tbody tr:even").css("background-color","red"); $("#data>tbody tr:odd").css("background-color","blue"); </script>
这就是使用原生js和jQuery库之间的区别,两行代码就可以搞定了,但是建议向我这样的小白,还是多用原生js写写,练一练,因为jQuery的底层就是原生js写的,原生的写的很溜了,那么jQuery也就简单了。