<title>表格样式</title>
<style type="text/css">
body{
margin:6px;
padding:0;
font-size:12px;
font-family:tahoma, arial;
background:#fff;
}
table{
width:100%;
}
tr.odd{
background:#fff;
}
tr.even{
background:#eee;
}
div.datagrid_div{
width: 100%;
border: 1px solid#999;
}
/*****************样式3*******************/
table.datagrid3{
border-collapse:separate;
}
table.datagrid3th{
text-align:left;
background:#ddd;
padding:3px;
border:0px solid #fff;
}
table.datagrid3td{
padding:3px;
border:0px solid #fff;
}
</style>
<script type="text/javascript">
functionadd_event(tr){
tr.οnmοuseοver= function(){
tr.className+= ' hover';
};
tr.οnmοuseοut= function(){
tr.className= tr.className.replace(' hover', '');
};
}
functionstripe(table) {
var trs= table.getElementsByTagName("tr");
for(vari=1; i<trs.length; i++){
vartr = trs[i];
tr.className= i%2 != 0? 'odd' : 'even';
add_event(tr);
}
}
window.onload =function(){
vartables = document.getElementsByTagName('table');
for(vari=0; i<tables.length; i++){
vartable = tables[i];
if(table.className== 'datagrid3'){
stripe(tables[i]);
}
}
}
</script>
</head>
<body>
<div style="width: 480px;">
<h3>样式3</h3>
<div class="datagrid_div">
<table class="datagrid3">
<tr>
<th>合约</th>
<th>最新价</th>
<th>涨跌</th>
</tr>
<tr>
<td>CBOT大豆</td>
<td>905.25</td>
<td>3.25</td>
</tr>
<tr>
<td>ideawu.net</td>
<td>381.25</td>
<td>1.25</td>
</tr>
<tr>
<td>CBOT小麦</td>
<td>548.5</td>
<td>-1</td>
</tr>
</table>
</div>
</div>
</body>
</html>
7802
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
