用三种方法添加各行变色
- 用css3中的nth-child()伪类添加颜色;
- 用原声js隔行添加颜色;
- 用jquery隔行添加颜色;
首先用到了jquery就需要搭建jquery框架
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<style>
#tab{
width: 100%;
border-collapse:collapse;
}
td{
border:1px solid black;
}
</style>
</head>
<body>
<table id="tab">
<tbody>
<tr><td>data</td><td>data</td><td>data</td></tr>
<tr><td>data</td><td>data</td><td>data</td></tr>
<tr><td>data</td><td>data</td><td>data</td></tr>
<tr><td>data</td><td>data</td><td>data</td></tr>
<tr><td>data</td><td>data</td><td>data</td></tr>
<tr><td>data</td><td>data</td><td>data</td></tr>
</tbody>
</table>
</body>
</html
<!-- <script >
window.onload=function(){
var Rtab=document.getElementById('#tab');
var Rtr=document.getElementsByTagName('tr');
for (var i = 0; i <Rtr.length; i++){
Rtr[i].index=i;
if (i%2==0) {
Rtr[i].style.background="#ccc";
}
}
}
</script> -->
这里是用原声的js加隔行颜色,这里有个问题是需要注意的,因为平时是用jquery,耳在jquery框架的里tr是有index的但是在原声的js里是是没有index这个属性的,这里需要用for循环给tr加index
<script>
$(function(){
$('#tab tr:nth-child(odd)').css({background:'red'})
})
</script>
var index=$('#tab tr').length;
for (var i =0; i <index; i++) {
if(i%2==0){
$('#tab tr').eq(i).css({background:'red'})
}
}
上面jquery的两种方式,
<style>
tr:nth-child(even){
background: red;
}
</style>