<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name='description' content='表格的高级应用'>
<title>表格的高级应用</title>
<script src="../jquery.js"></script>
<script>
window.onload = function () {
var oTab = document.getElementById('tab1'); for (var i=0; i<oTab.tBodies[0].rows.length; i++){
if(i%2){
oTab.tBodies[0].rows[i].style.background='red';
}else {
oTab.tBodies[0].rows[i].style.background='green';
}
}
}
</script>
</head>
<body>
<table id="tab1" border='1' width="500px">
<thead>
<tr>
<td>ID</td>
<td>gender</td>
<td>name</td>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>male</td>
<td>John</td>
</tr>
<tr>
<td>02</td>
<td>female</td>
<td>Ann</td>
</tr>
<tr>
<td>03</td>
<td>female</td>
<td>Merry</td>
</tr>
<tr>
<td>04</td>
<td>female</td>
<td>Jessis</td>
</tr>
<tr>
<td>05</td>
<td>male</td>
<td>Jack</td>
</tr>
<tr>
<td>ID</td>
<td>男</td>
<td>Apollo</td>
</tr>
</tbody>
</table> </body>
</html>