| 導購 | 订阅 | 在线投稿
分享
 
 
 

比較高效的表格行背景變色及選定高亮JS

來源:互聯網  2008-12-13 08:23:35  評論

一個項目要用,又不想用jquery之類的東東。先去網上搜索了下,找到了不少在CSS中執行JS的表格行變色方式,不過這類方式在表格行多的時候相當卡,就自己按著最原始的方式倒騰了個出來獻給廣大的JS小白們(本人也算上JS小白之一 ),在IE7和firefox3中測試正常。

這段JS放在head中view plaincopy to clipboardprint?

//點擊當前選中行的時候設置當前行的顔色,同時恢複除當前行外的行的顔色及鼠標事件

function selectRow(target)

{

var sTable = document.getElementById("ServiceListTable")

for(var i=1;i<sTable.rows.length;i++) //遍曆除第一行外的所有行

{

if (sTable.rows[i] != target) //判斷是否當前選定行

{

sTable.rows[i].bgColor = "#ffffff"; //設置背景色

sTable.rows[i].onmouseover = resumeRowOver; //增加onmouseover 事件

sTable.rows[i].onmouseout = resumeRowOut;//增加onmouseout 事件

}

else

{

sTable.rows[i].bgColor = "#d3d3d3";

sTable.rows[i].onmouseover = ""; //去除鼠標事件

sTable.rows[i].onmouseout = ""; //去除鼠標事件

}

}

}

//移過時tr的背景色

function rowOver(target)

{

target.bgColor='#e4e4e4';

}

//移出時tr的背景色

function rowOut(target)

{

target.bgColor='#ffffff';

}

//恢複tr的的onmouseover事件配套調用函數

function resumeRowOver()

{

rowOver(this);

}

//恢複tr的的onmouseout事件配套調用函數

function resumeRowOut()

{

rowOut(this);

}

//點擊當前選中行的時候設置當前行的顔色,同時恢複除當前行外的行的顔色及鼠標事件

function selectRow(target)

{

var sTable = document.getElementById("ServiceListTable")

for(var i=1;i<sTable.rows.length;i++) //遍曆除第一行外的所有行

{

if (sTable.rows[i] != target) //判斷是否當前選定行

{

sTable.rows[i].bgColor = "#ffffff"; //設置背景色

sTable.rows[i].onmouseover = resumeRowOver; //增加onmouseover 事件

sTable.rows[i].onmouseout = resumeRowOut;//增加onmouseout 事件

}

else

{

sTable.rows[i].bgColor = "#d3d3d3";

sTable.rows[i].onmouseover = ""; //去除鼠標事件

sTable.rows[i].onmouseout = ""; //去除鼠標事件

}

}

}

//移過時tr的背景色

function rowOver(target)

{

target.bgColor='#e4e4e4';

}

//移出時tr的背景色

function rowOut(target)

{

target.bgColor='#ffffff';

}

//恢複tr的的onmouseover事件配套調用函數

function resumeRowOver()

{

rowOver(this);

}

//恢複tr的的onmouseout事件配套調用函數

function resumeRowOut()

{

rowOut(this);

}關于最後兩個函數resumeRowOver和resumeRowOut爲什麽這樣寫參考我之前寫的通過js給頁面元素添加事件

對應的表格HTMLview plaincopy to clipboardprint?

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="ServiceListTable">

<tr>

<th>服務事項</th>

<th>N</th>

<th>狀態</th>

<th>辦結</th>

<th>資料</th>

</tr>

<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">

<td>相關內容</td>

<td align="center">&nbsp;</td>

<td align="center">&nbsp;</td>

<td align="center">&nbsp;</td>

<td align="center">&nbsp;</td>

</tr>

<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">

<td>相關內容</td>

<td align="center">&nbsp;</td>

<td align="center">&nbsp;</td>

<td align="center">&nbsp;</td>

<td align="center">&nbsp;</td>

</tr>

<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">

<td>相關內容</td>

<td align="center">&nbsp;</td>

<td align="center">&nbsp;</td>

<td align="center">&nbsp;</td>

<td align="center">&nbsp;</td>

</tr>

<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">

<td>相關內容</td>

<td align="center">&nbsp;</td>

<td align="center">&nbsp;</td>

<td align="center">&nbsp;</td>

<td align="center">&nbsp;</td>

</tr>

</table>

from:http://blog.breakn.net/article.asp?id=447

  一個項目要用,又不想用jquery之類的東東。先去網上搜索了下,找到了不少在CSS中執行JS的表格行變色方式,不過這類方式在表格行多的時候相當卡,就自己按著最原始的方式倒騰了個出來獻給廣大的JS小白們(本人也算上JS小白之一 ),在IE7和firefox3中測試正常。   這段JS放在head中view plaincopy to clipboardprint? //點擊當前選中行的時候設置當前行的顔色,同時恢複除當前行外的行的顔色及鼠標事件 function selectRow(target) { var sTable = document.getElementById("ServiceListTable") for(var i=1;i<sTable.rows.length;i++) //遍曆除第一行外的所有行 { if (sTable.rows[i] != target) //判斷是否當前選定行 { sTable.rows[i].bgColor = "#ffffff"; //設置背景色 sTable.rows[i].onmouseover = resumeRowOver; //增加onmouseover 事件 sTable.rows[i].onmouseout = resumeRowOut;//增加onmouseout 事件 } else { sTable.rows[i].bgColor = "#d3d3d3"; sTable.rows[i].onmouseover = ""; //去除鼠標事件 sTable.rows[i].onmouseout = ""; //去除鼠標事件 } } } //移過時tr的背景色 function rowOver(target) { target.bgColor='#e4e4e4'; } //移出時tr的背景色 function rowOut(target) { target.bgColor='#ffffff'; } //恢複tr的的onmouseover事件配套調用函數 function resumeRowOver() { rowOver(this); } //恢複tr的的onmouseout事件配套調用函數 function resumeRowOut() { rowOut(this); } //點擊當前選中行的時候設置當前行的顔色,同時恢複除當前行外的行的顔色及鼠標事件 function selectRow(target) { var sTable = document.getElementById("ServiceListTable") for(var i=1;i<sTable.rows.length;i++) //遍曆除第一行外的所有行 { if (sTable.rows[i] != target) //判斷是否當前選定行 { sTable.rows[i].bgColor = "#ffffff"; //設置背景色 sTable.rows[i].onmouseover = resumeRowOver; //增加onmouseover 事件 sTable.rows[i].onmouseout = resumeRowOut;//增加onmouseout 事件 } else { sTable.rows[i].bgColor = "#d3d3d3"; sTable.rows[i].onmouseover = ""; //去除鼠標事件 sTable.rows[i].onmouseout = ""; //去除鼠標事件 } } } //移過時tr的背景色 function rowOver(target) { target.bgColor='#e4e4e4'; } //移出時tr的背景色 function rowOut(target) { target.bgColor='#ffffff'; } //恢複tr的的onmouseover事件配套調用函數 function resumeRowOver() { rowOver(this); } //恢複tr的的onmouseout事件配套調用函數 function resumeRowOut() { rowOut(this); }  關于最後兩個函數resumeRowOver和resumeRowOut爲什麽這樣寫參考我之前寫的通過js給頁面元素添加事件   對應的表格HTMLview plaincopy to clipboardprint? <table width="100%" border="0" cellspacing="0" cellpadding="0" id="ServiceListTable"> <tr> <th>服務事項</th> <th>N</th> <th>狀態</th> <th>辦結</th> <th>資料</th> </tr> <tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)"> <td>相關內容</td> <td align="center">&nbsp;</td> <td align="center">&nbsp;</td> <td align="center">&nbsp;</td> <td align="center">&nbsp;</td> </tr> <tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)"> <td>相關內容</td> <td align="center">&nbsp;</td> <td align="center">&nbsp;</td> <td align="center">&nbsp;</td> <td align="center">&nbsp;</td> </tr> <tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)"> <td>相關內容</td> <td align="center">&nbsp;</td> <td align="center">&nbsp;</td> <td align="center">&nbsp;</td> <td align="center">&nbsp;</td> </tr> <tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)"> <td>相關內容</td> <td align="center">&nbsp;</td> <td align="center">&nbsp;</td> <td align="center">&nbsp;</td> <td align="center">&nbsp;</td> </tr> </table> from:http://blog.breakn.net/article.asp?id=447
󰈣󰈤
王朝萬家燈火計劃
期待原創作者加盟
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
王朝網路微信公眾號
微信掃碼關註本站公眾號 wangchaonetcn
 
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有