| 寄件人 | 主题 | 日期 | 大小 |
|---|---|---|---|
| 关羽 | 大意失荆州 | 8月7日 | 4k |
| 张飞 | 长板坡一吼，吓退十万雄兵 | 3月24日 | 5k |
| 赵云 | 最帅莫过赵子龙 | 3月24日 | 3k |
| JavaScript | 欢迎分享JavaScript sharejs.com | 10月24日 | 3k |
点击表格中的某一样，该行会出现一个颜色逐渐扩展开的效果，高亮显示改行，非常棒
第一步：
在<head>区添加样式定义
<style>
#tbList th{text-align:left;padding-left:20;border:1px solid white;border-right:1px solid #7994BF;border-bottom:1px solid
#7994BF}
#tbList td{padding-left:6;border-top:1px solid white;border-bottom:1px solid #CDD0E1}
</style>
第二步：
在<body>区添加表格定义和JavaScript脚本
点击表格中的行，看看会有什么效果<br>
<table id=tbList cellpadding=0 cellspacing=0 width=100% style=cursor:default;font-size:12>
<tr height=25 bgcolor=#C1D1EA>
<th width=160>寄件人</th>
<th>主题</th>
<th width=90>日期</th>
<th width=90>大小</th>
</tr>
<tr height=25>
<td>关羽</td>
<td>大意失荆州</td>
<td>8月7日</td>
<td>4k</td>
</tr>
<tr height=25>
<td>张飞</td>
<td>长板坡一吼，吓退十万雄兵</td>
<td>3月24日</td>
<td>5k</td>
</tr>
<tr height=25>
<td>赵云</td>
<td>最帅莫过赵子龙</td>
<td>3月24日</td>
<td>3k</td>
</tr>
<tr height=25>
<td>JavaScript</td>
<td>欢迎分享JavaScript <a href="http://www.sharejs.com">sharejs.com</a></td>
<td>10月24日</td>
<td>3k</td>
</tr>
</table>
<script>
/*****************************************************
* Share JavaScript (http://www.ShareJS.com)
* 使用此脚本程序，请保留此声明
* 获取此脚本以及更多的JavaScript程序，请访问 http://www.ShareJS.com
******************************************************/
document.getElementById("tbList").onmousedown=function(e){
var tb=this,tr,ee
ee=e==null?event.srcElement:e.target
if(ee.tagName!="TD")
return
tr=ee.parentNode
if(tb.selRow!=null)
setTrReveal(tb.selRow,"background:white",1)
setTrReveal(tr,"background:#EAEAEA")
tb.selRow=tr
}
function setTrReveal(tr,css,noDelay){
var i
if(!document.all)
return tr.style.cssText+=";"+css
for(i=0;i< tr.cells.length;i++){
if(noDelay){
tr.cells[i].style.cssText+=";"+css
continue
}
tr.cells[i].style.filter="progid:DXImageTransform.Microsoft.RevealTrans(duration=0.5,transition=16)"
tr.cells[i].filters[0].apply()
tr.cells[i].style.cssText+=";"+css
tr.cells[i].filters[0].play()
}
}
</script>
