<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="demo.css" />
<script src="haha.js"></script>
<title>hahahah</title>
</head>
<body>
<table>
<caption>title</caption>
<thead>
<tr>
<th>When</th>
<th>Where</th>
</tr>
</thead>
<tbody>
<tr>
<td>June 9th</td>
<td>Portland,<abbr title="Oregon">OR</abbr></td>
</tr>
<tr>
<td>June 10th</td>
<td>seattle,<abbr title="Washington">WA</abbr></td>
</tr>
<tr>
<td>June 12th</td>
<td>Sacramento,<abbr title="California">CA</abbr></td>
</tr>
</tbody>
</table>
</body>
</html>
css部分
body{
background-color:#fff;
color:#000;
}
table{
margin:auto;
border:1px solid #699;
}
caption{
margin:auto;
padding:.2em;
font-size:1.2em;
font-weight:bold;
}
th{
font-weight:normal;
font-style:italic;
text-align:left;
border:1px dotted #699;
background-color:#ccc;
color:#000;
}
td,tr{
width:10em;
padding:.5em;
}
tr:hover{
font-size:bold;
}
.odd{
background-color:red;
}
js部分
function ss(){
if(!document.getElementsByTagName('table')) return false;
var tables=document.getElementsByTagName('table');
var odd,rows;
for(var i=0;i<tables.length;i++){
odd=false;
rows=tables[i].getElementsByTagName('tr');
for(var j=0;j<rows.length;j++){
if(odd == true){
//rows[j].style.backgroundColor="red";
addClass(rows[j],"odd");
odd=false;
}else{
odd=true;
}
}
}
}
function dd(){
if(!document.getElementsByTagName) return false;
var rows=document.getElementsByTagName('tr');
for(var i=0;i<rows.length;i++){
rows[i].οnmοuseοver=function(){
this.style.fontWeight="bold";
}
rows[i].οnmοuseοut=function(){
this.style.fontWeight="normal";
}
}
}
//公共添加样式函数
function addClass(element,value){
if(!element.className){
element.className=value;
}else{
newClassName=element.className;
newClassName+=" ";
newClassName+=value;
element.className=newClassName
}
}
window.οnlοad=function(){
ss();
dd();
}
扫一扫
445
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
