在此我們簡單的介紹如何利用html,css與js文檔，來實現移動滑鼠(mouseOver或mourseOut)改變表格列的顏色之效果(change table row color on mouseOver or mouseOut)，接下來分別說明DEMO畫面、CSS代碼(showTbl.css)、JS檔案代碼 (chgRowsBg.js)與index.htm網頁結果輸出頁面。
DEMO畫面
在瀏灠器上執行index.htm頁面，所產出的結果畫面顯示截圖
CSS代碼 (showTbl.css)
負責控制Html標籤屬性的呈現效果，例如文字顏色、表格框線、宽度、高度之類的屬性值設定
table.show, table.show td{
font:73% Arial, Helvetica, sans-serif;
}
table.show {
width:100%;
border-collapse:collapse;
}
table.show th, table.show td{
text-align:left;
padding:.5em;
border:1px solid #fff;
text-align: center;
}
table.show th{
background:#2F79B8 url(s3-bg.jpg) repeat-x;
color:#fff;text-align: center;
}
.empty{
font-size:100%;
}
table.show tr.even td{
background:#f9fbfd;
}
table.show tr.odd td{
background:#e4e4e4;
}
tr.overCss td{
background:#ffffa2;
}
JS檔案代碼 (chgRowsBg.js)
在瀏灠器載入index.htm頁面之後，負責動態操控改變Html元素的屬性值，讓該元素在輸出端達到變換效果的目的
this.alterTableRowsColor = function() {
var preCss;
this.start = function(){
var tables = document.getElementsByTagName('table');
for(var i=0; i < tables.length; i++){
var tid = tables[i].getAttribute('id');
if(tid.indexOf("form") != -1)
showRow(tables[i]);
}
};
this.showRow = function(table){
var trs = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
for (var i = 0; i < trs.length; i++) {
trs[i].onmouseover = function(){ over(this); };
trs[i].onmouseout = function(){ out(this,preCss); };
}
};
this.over = function(obj) {
preCss = obj.className;
obj.className = 'overCss';
};
this.out = function(obj,preCss){
//alert("preCss=="+preCss);
obj.className = preCss;
};
start();
};
//window.onload = alterTableRowsColor;
index.htm頁面程式代碼
一個單純的使用Html表格的標籤撘配CSS與JavaScript文檔所組合而成的Html程式代碼
<html>
<head>
<link rel="stylesheet" type="text/css" href="showTbl.css" />
<script type="text/javascript" src="chgRowsBg.js"></script>
</head>
<body onload="alterTableRowsColor();">
<form name="form1" id="form1">
<table border=0 width="100%">
<tr>
<td>
<table id="form1:table1" border="0" cellpadding="0" cellspacing="0" width="100%" class="show">
<THead>
<tr>
<th>Title1</th>
<th>Title2</th>
<th>Title3</th>
<th>Title4</th>
</tr>
</THead>
<TBody>
<tr class="even">
<td>aaa1</td>
<td>aaa2</td>
<td>aaa3</td>
<td>aaa4</td>
</tr>
<tr class="odd">
<td>bbb1</td>
<td>bbb2</td>
<td>bbb3</td>
<td>bbb4</td>
</tr>
<tr class="even">
<td>ccc1</td>
<td>ccc2</td>
<td>ccc3</td>
<td>ccc4</td>
</tr>
<tr class="odd">
<td>ddd1</td>
<td>ddd2</td>
<td>ddd3</td>
<td>ddd4</td>
</tr>
<tr class="even">
<td>eee1</td>
<td>eee2</td>
<td>eee3</td>
<td>eee4</td>
</tr>
</TBody>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
沒有留言:
張貼留言