JS实现页面中表格的隔行变色
2020-03-07 本文已影响0人
知名大学士
效果图
思路
我们要使用js获取到表格元素，然后获取到每一行，然后将奇数行或偶数行的背景颜色改变。
代码
首先我们建立基本的html结构：
<table border="1" cellspacing="0">
<tbody id="tbody">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
然后我们id获取到<tbody>标签：
var otboby = document.getElementById("tbody").children;
我们使用for()循环来获取到<tbody>内每一行元素<tr>
for(var i = 0; i < otboby.length; i++){}
在for()循环内我们判断是奇数行还是偶数行，在这里，我们判断如果是奇数行就改变背景色为蓝色，也就是第1、3、5、7、9...行，即下标为0、2、4、6...行，所以我们要i % 2 === 0
if(i % 2 === 0)
otable[i].style.background = "blue";
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
border:1px solid red;
border-collapse: collapse;
}
tr,td{
border: 1px solid green;
}
td{
width: 100px;
}
</style>
</head>
<body>
<table border="1" cellspacing="0">
<tbody id="tbody">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
<script>
var otboby= document.getElementById("tbody").children;
for(var i = 0; i < otboby.length; i++){
if(i % 2 === 0)
otboby[i].style.background = "blue";
}
</script>
</body>
</html>
