(1)獲取行號
<table> <tr onmouseover ="showIndex(this)"><td>1</td></tr> <tr onmouseover ="showIndex(this)"><td>2</td></tr> <tr onmouseover ="showIndex(this)"><td>3</td></tr> <tr onmouseover ="showIndex(this)"><td>4</td></tr> </table>
function showIndex(pVal) { alert(pVal.rowIndex); }
(2)改變顏色、符號
/*在行上改變 圖片*/ for(var i=0;i<=pTable.rows.length-1;i++) { var row=pTable.rows[i]; row.onmouseover = function() {/*js this是事件的觸發者*/ this.style.backgroundColor="#ffff00"; var tempDv = this.childNodes[0].childNodes[0]; var currentY = parseInt(tempDv.style.backgroundPositionY.split('px')[0]); var newY = currentY - 30 + "px"; tempDv.style.backgroundPositionY = newY; } row.onmouseout = function() { this.style.backgroundColor="#ffffff"; var tempDv = this.childNodes[0].childNodes[0]; var currentY = parseInt(tempDv.style.backgroundPositionY.split('px')[0]); var newY = currentY + 30 + "px"; tempDv.style.backgroundPositionY = newY; } }
（3）excel表格效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css" > table{ border-collapse:collapse;}/*table消除行間距的技巧*/ #tb1 td{border:1px solid #000000;}/*td和colgroup無法限制cell的寬度.只要內容超過設定值,單元格會被撐開*/ /**************************/ #tb2 td{border:1px solid #000000;} #tb2 td span{border-right:1px solid #000000;}/*每行1td,行內用span來控制單元格寬度. */ .span1{ width:33px; height:20px; overflow:hidden;}/*失敗原因：span是行內元素 寬高屬性無效*/ .span2{ width:48px;height:20px; overflow:hidden;}/*如果將文本直接放在td內,對控制td的wh和overflow,內容過長一樣會撐開*/ /************************/ #tb3 td{border:1px solid #000000;}/*可行方案每行1td,td內使用p,即可控制列寬*/ #tb3 p{ float:left; margin:0px; padding:0px; border-right:solid 1px #000000} </style> </head> <body> <table id="tb1"> <tr><td>姓名</td><td>身份證</td></tr> <tr><td class ="span1">111312321312</td><td class ="span2">222312312</td></tr><!--文本在td內,直接控制td的width,overflow.當文本超長,td會被撐開--> <tr><td class ="span1">1113213213121</td><td class ="span2">222312312</td></tr> </table> <div style="height:20px"></div> <table id="tb2"> <tr><td><span>姓名</span><span>身份證</span></td></tr> <tr><td><span class="span1">111</span><span class="span2">222</span></td></tr> <tr><td><span class="span1">111</span><span class="span2">222</span></td></tr> </table> <div style="height:20px"></div> <table id="tb3"> <tr><td><p>姓名</p><p>身份證</p></td></tr> <tr><td><p class="span1">111</p><p class="span2">222</p></td></tr> <tr><td><p class="span1">111</p><p class="span2">222</p></td></tr> </table> </body> </html>
