1. 放肆雷特 - 锋哥的博客首页
  2. 程序生涯
  3. JavaScript

JavaScript实现被附加的表格可以支持行点击高亮

最近一直在憋大招,憋了半年一个屁都没有~~一直忙于项目,今天正好在找资料的时候找到了以前项目里面用到的一个JS实现的函数。该断代码来自于以前项目里面一个大牛之手,比较简单,但是比较实用。毕竟是几年之前的作品,今天放上来记录一下。

//*=============================================================
//* 功能: 这个类使得被附加的表格可以支持行点击高亮 
//* 方法: $highlightTableRows
//* 参数: tableId: 要附加样式的 table的id
//*============================================================= 
function $highlightTableRows(tableId) 
{
 var table = document.getElementById(tableId); 
 if (!table) return;
 
 table.selectRowIndex = -1;
 var tbody = table.getElementsByTagName("tbody")[0];
 if (tbody == null) 
 {
 var rows = table.getElementsByTagName("tr");
 } 
 else 
 {
 var rows = tbody.getElementsByTagName("tr");
 }
 
 var _this = this;
 table.attachEvent("onclick", table_onclick);
 
 //让table默认选择第一行
 var _headerRowCount = 0;
 for (var i=0; i < rows.length; i++) 
 {
 //如果此行第一个单元格的样式为:dataCell,说明此行为数据行
 if (rows[i].cells[0].className == "dataCell")
 {
 _headerRowCount = i;
 rows[i].click();
 break;
 }
 
 //rows[i].onmouseover = function() { this.style.backgroundColor='lightsteelblue' };
 //rows[i].onmouseout = function() { this.style.backgroundColor='#fff' };
 }
 
 function table_onclick() {
 var e = event.srcElement; 
 if (e.tagName == 'TD')
 e = e.parentElement; 
 if (e.tagName != 'TR') return;
 if (e == _this.currentRow) return; 
 if (_this.currentRow)
 _this.currentRow.runtimeStyle.backgroundColor = '';
 
 e.runtimeStyle.backgroundColor = 'lightsteelblue';
 _this.currentRow = e;
 table.currentRow = e;
 table.selectRowIndex = parseInt(e.rowIndex) - parseInt(_headerRowCount);
 table.currentRow.selectRowIndex = table.selectRowIndex
 }
};

原创文章,作者:锋哥,如若转载,请注明出处:https://www.fangsi.net/1035.html

发表评论

登录后才能评论

评论列表(2条)

联系我们

在线咨询:点击这里给我发消息

邮件:service@fangsi.net

工作时间:周一至周五,9:30-18:30,节假日休息