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

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

本博客所有文章如无特别注明均为原创

如果觉得对你有帮助,可以通过下方打赏对作者表示鼓励

本文采用知识共享署名-非商业性使用-相同方式共享

如若转载,请注明出处:《JavaScript实现被附加的表格可以支持行点击高亮》https://www.fangsi.net/1035.html

(1)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
锋哥的头像锋哥管理员
上一篇 2014年10月30日 11:01
下一篇 2014年11月14日 11:43

相关推荐

发表回复

登录后才能评论

评论列表(2条)