Home > Developer > Web Develop
<! DOCTYPE html>
>
>
<meta CharSet="UTF-8">
<title></title>
<style type= "Text/css">
#table {
width: px;
border-collapse: collapse;
}
</style>
>
<body>
<table id= "table" Border= "1">
<thead>
<td>id</td>
<td> name </td>
<td> age </td>
</thead>
<tbody>
<tr>
<td>1</td>
<td> Huang Yibo </td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td> Zhang San </td>
<td>21</td>
</tr>
<tr>
<td>3</td>
<td> John Doe </td>
<td>22</td>
</tr>
<tr>
<td>4</td>
<td> network without </td>
<td>23</td>
</tr>
</tbody>
</table>
</body>
<script type= "Text/javascript">
//achieve interlaced color, mouse move in highlight
var table = document.getElementById ("table");
var oldcolor = "";//Declare a variable to save the original color of the table
For (var i = 0; I < table.tbodies[0].rows.length; I+ +) {
//use judgment to achieve interlaced discoloration
if(i% 2 = = 0) {
table.tbodies[0].rows[i]. Style.backgroundcolor = "Gray";
} else {
table.tbodies[0].rows[i]. Style.backgroundcolor = "#ccc";
}
//Implement mouse Move-in highlighting
table.tbodies[0].rows[i]. onmouseover = function () {
Oldcolor = this. Style.backgroundcolor;
This . Style.backgroundcolor = "Red";
}
//implement mouse out to change back to original color
table.tbodies[0].rows[i]. onmouseout = function () {
This . Style.backgroundcolor = oldcolor;
}
}
</script>
>
JS to achieve interlaced color, mouse moved into the highlight
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
