您的位置:首页 > 其它

设置表格隔行变色,以及鼠标悬浮变色效果

2015-09-23 10:25 627 查看
function SetTableInterfaceColor(o) { var maxrowspan = 0; var witebk = "whitebk"; var graybk = "graybk"; if (o) { graybk = witebk } var bluebk = "graybkhover"; var bk = graybk; var bkattr = "bg_color"; $(".tableCss tbody tr").each(function () { var bkother = bk == witebk ? graybk : witebk; if (maxrowspan > 0) { $(this).removeClass(bkother).addClass(bk).attr(bkattr, bk); maxrowspan-- } else { bk = bkother; bkother = bk == witebk ? graybk : witebk; $(this).children().each(function () { var maxrow = parseInt($(this).attr("rowspan"), 10); if (isNaN(maxrow)) { maxrow = 0 } maxrowspan = Math.max(maxrow, maxrowspan) }); $(this).removeClass(bkother).addClass(bk).attr(bkattr, bk); maxrowspan-- } }); function setprev(obj, oldbk, tbk) { var o = $(obj).prev(); if (o != null && o != undefined) { if (o.attr(bkattr) == oldbk) { o.removeClass(witebk).removeClass(graybk).removeClass(bluebk).addClass(tbk); setprev(o, oldbk, tbk) } } } function setnext(obj, oldbk, tbk) { var o = $(obj).next(); if (o != null && o != undefined) { if (o.attr(bkattr) == oldbk) { o.removeClass(witebk).removeClass(graybk).removeClass(bluebk).addClass(tbk); setnext(o, oldbk, tbk) } } } if (!o) { $(".tableCss tbody  tr").bind("mouseover", function () { $(this).removeClass(witebk).removeClass(graybk).addClass(bluebk); var tbk = $(this).attr(bkattr); setprev(this, tbk, bluebk); setnext(this, tbk, bluebk) }); $(".tableCss tbody  tr").bind("mouseout", function () { var tbk = $(this).attr(bkattr); $(this).removeClass(bluebk).addClass(tbk); setprev(this, tbk, tbk); setnext(this, tbk, tbk) }) } };


支持合并行隔行变色效果,默认带有合并行认为为一行。

使用方法:

SetTableInterfaceColor();或者SetTableInterfaceColor(1);
两者效果是不一样的,后面没有隔行变色。
注意:需要自己定义样式:whitebk,graybk,graybkhover.
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: