Using JS(javascript) to complete an interlaced color change of the table
Analysis
1. confirm the event (page loading event onload)
2. Get element: get the table (document.getElementById()), the final purpose is to get the number of rows (length) in the tbody in the table.
3. Number of rows in tbody (rows.length)
4.JS traversal (for loop)
5. Get odd and even rows (get the remainder of ergodic middle angle sign pair 2)
6. Set background color (. style.backgroundColor)
Step analysis:
Step 1: determine the event (onload) and bind a function to it
Step 2: write the function (get the table)
Step 3: get the number of lines in tbody
Step 4: traverse the rows in tbody
Step 5: obtain odd and even rows (the remainder of angle sign pair 2)
Step 6: set the background color for odd rows and even rows respectively
Code implementation:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>use js Realize the color change of table interlaced</title>
<script type="text/javascript">
function init(){
//1. Get table id
var tblE = document.getElementById('tbl');
//2. Get the number of table rows
var len = tblE.tBodies[0].rows.length;//There can be many < tBodies > in a table. tBodies[0] is the first one to return multiple < tBodies >. tBodies is equivalent to an array
//alert(len);
//3. Number of rows traversing tbody
for(var i=0;i<len;i++){
if(i%2==0){
tblE.tBodies[0].rows[i].style.backgroundColor = "pink";
}else{
tblE.tBodies[0].rows[i].style.backgroundColor = "gold";
}
}
}
</script>
</head>
<body onload="init()">
<table border="1" width="500" height="50" align="center" id="tbl">
<thead>
<tr>
<th>number</th>
<th>Full name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr >
<td>1</td>
<td>Zhang San</td>
<td>22</td>
</tr>
<tr >
<td>2</td>
<td>Li Si</td>
<td>25</td>
</tr>
<tr >
<td>3</td>
<td>Wang Wu</td>
<td>27</td>
</tr>
<tr >
<td>4</td>
<td>Zhao Liu</td>
<td>29</td>
</tr>
<tr >
<td>5</td>
<td>Pseudo-ginseng</td>
<td>30</td>
</tr>
<tr >
<td>6</td>
<td>Fen nine</td>
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html>The results are shown as follows: 