您的位置：首页 > Web前端 > JQuery

使用原生js和jQuery实现表格的隔行变色

2017-10-26 18:05 796 查看

原生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>
&
b850
lt;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<trs.length;i++){
//判断当前的下标是奇数还是偶数，实现隔行变色
if(i%2==0){
trs[i].className="blue";
}else{
trs[i].style.backgroundColor="red";
}
}
</script>

利用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也就简单了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery javascript dom

相关文章推荐

新的分享

章节导航