<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta charset="utf-8">
<style type="text/css">
thead tr{
background:#aaf;
}
.odd{
background:#ccf;
}
</style>
</head>
<body >
<table id="tab" border="1px" color="black" width="300px" height="50px">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
</tr>
</thead>
<tbody>
<tr>
<td>10</td>
<td>tom</td>
</tr>
<tr>
<td>10</td>
<td>tom</td>
</tr>
<tr>
<td>10</td>
<td>tom</td>
</tr>
<tr>
<td>10</td>
<td>tom</td>
</tr>
<tr>
<td>10</td>
<td>tom</td>
</tr>
<tr>
<td>10</td>
<td>tom</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
//查找tbody tr
var table=document.getElementById('tab');
var tbody=table.getElementsByTagName('tbody')[0];
var trList=tbody.getElementsByTagName('tr');
for(var i=0;i<trList.length;i++){
if(i%2==1){
var tr=trList[i];
var classNode=document.createAttribute('class');
classNode.value='odd';
tr.setAttributeNode(classNode);
}
}
</script>
</body>
</html>
HTML之表格隔行变色
最新推荐文章于 2024-07-12 18:29:20 发布