高效的表格行背景隔行變色及選定高亮的JS代碼
更新時間:2010年12月04日 12:41:47 作者:
一個項目要用,又不想用jquery之類的東東。先去網上搜索了下,找到了不少在CSS中執(zhí)行JS的表格行變色方式,不過這類方式在表格行多的時候相當卡,在IE7和firefox3中測試正常。
這段JS放在head中
//點擊當前選中行的時候設置當前行的顏色,同時恢復除當前行外的行的顏色及鼠標事件
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事件配套調用函數(shù)
function resumeRowOver()
{
rowOver(this);
}
//恢復tr的的onmouseout事件配套調用函數(shù)
function resumeRowOut()
{
rowOut(this);
}
關于最后兩個函數(shù)resumeRowOver和resumeRowOut為什么這樣寫參考我之前寫的通過js給頁面元素添加事件
對應的表格HTML
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="ServiceListTable">
<tr>
<th>服務事項</th>
<th>N</th>
<th>狀態(tài)</th>
<th>辦結</th>
<th>資料</th>
</tr>
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">
<td>相關內容</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">
<td>相關內容</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">
<td>相關內容</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">
<td>相關內容</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
</table>
復制代碼 代碼如下:
//點擊當前選中行的時候設置當前行的顏色,同時恢復除當前行外的行的顏色及鼠標事件
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事件配套調用函數(shù)
function resumeRowOver()
{
rowOver(this);
}
//恢復tr的的onmouseout事件配套調用函數(shù)
function resumeRowOut()
{
rowOut(this);
}
關于最后兩個函數(shù)resumeRowOver和resumeRowOut為什么這樣寫參考我之前寫的通過js給頁面元素添加事件
對應的表格HTML
復制代碼 代碼如下:
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="ServiceListTable">
<tr>
<th>服務事項</th>
<th>N</th>
<th>狀態(tài)</th>
<th>辦結</th>
<th>資料</th>
</tr>
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">
<td>相關內容</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">
<td>相關內容</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">
<td>相關內容</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">
<td>相關內容</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
</table>
相關文章
Bootstrap開發(fā)實戰(zhàn)之第一次接觸Bootstrap
Bootstrap開發(fā)實戰(zhàn)之第一次接觸Bootstrap,想要學好一門語言,首先應該進行深入了解,感興趣的小伙伴們可以參考一下2016-06-06JavaScript實現(xiàn)的前端AES加密解密功能【基于CryptoJS】
這篇文章主要介紹了JavaScript實現(xiàn)的前端AES加密解密功能,涉及javascript基于CryptoJS插件進行AES加密解密操作相關實現(xiàn)技巧,需要的朋友可以參考下2018-08-08