JS示例24-隔行换色（表格）
2019-04-02 本文已影响0人
微小码
oTBodys.rows[i].style.background = 'gray';
<!DOCTYPE >
<html>
<head>
<title></title>
<meta charset="utf-8">
<script>
window.onload = function() {
var oTab = document.getElementById('tab1');
var oTBodys = oTab.tBodies[0]; // tbody可能有多个，取第一个
for(var i = 0; i < oTBodys.rows.length; i++) {
if(i % 2 != 0) {
oTBodys.rows[i].style.background = 'gray';
}
}
}
</script>
</head>
<body>
<table id="tab1" width="500" border="1">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>27</td>
</tr>
<tr>
<td>2</td>
<td>张三</td>
<td>23</td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>28</td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>25</td>
</tr>
<tr>
<td>5</td>
<td>张伟</td>
<td>24</td>
</tr>
<tr>
<td>6</td>
<td>林一</td>
<td>25</td>
</tr>
</tbody>
</table>
</body>
</html>
image.png
鼠标移入变色
<!DOCTYPE >
<html>
<head>
<title></title>
<meta charset="utf-8">
<script>
window.onload = function() {
var oTab = document.getElementById('tab1');
var oTBodys = oTab.tBodies[0]; // tbody可能有多个，取第一个
var oldColor;
for(var i = 0; i < oTBodys.rows.length; i++) {
oTBodys.rows[i].onmouseover = function() {
oldColor = this.style.background;
this.style.background = 'blue';
}
oTBodys.rows[i].onmouseout = function() {
this.style.background = oldColor;
}
if(i % 2 != 0) {
oTBodys.rows[i].style.background = 'gray';
} else {
oTBodys.rows[i].style.background = oldColor;
}
}
}
</script>
</head>
<body>
<table id="tab1" width="400" border="1">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>27</td>
</tr>
<tr>
<td>2</td>
<td>张三</td>
<td>23</td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>28</td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>25</td>
</tr>
<tr>
<td>5</td>
<td>张伟</td>
<td>24</td>
</tr>
<tr>
<td>6</td>
<td>林一</td>
<td>25</td>
</tr>
</tbody>
</table>
</body>
</html>
image
