首页 > 其他 > 详细

ecology8设置明细表的奇偶行底色交错(斑马线)

时间:2019-10-11 14:28:23      阅读:135      评论:0      收藏:0      [点我收藏+]

给明细表的奇偶行设置底色交错,可增强视觉效果。

技术分享图片

 

 1 /**
 2  * 奇偶行底色交错(斑马线)
 3  * @param {*} $tbody 表格的tbody对应的jQ对象
 4  * @param {*} basicId 基准取值字段id
 5  * @param {*} backgroundColor 背景颜色,默认浅灰
 6  */
 7 function setZebraCrossing($tbody, basicId, backgroundColor) {
 8     if (backgroundColor == undefined) {
 9         backgroundColor = "rgb(220, 220, 220)";
10     }
11     $tbody.children("tr[_target=‘datarow‘]").each(function (index, element) {
12         if (index == 0) {
13             return true;
14         }
15         var prevColor = $(this).prev().css("background-color");
16         var value = $("#" + basicId + "_" + index).val();
17         var prevValue = $("#" + basicId + "_" + (index - 1)).val();
18         var newColor = prevColor;
19         if (value != prevValue) {
20             newColor = prevColor == "rgba(0, 0, 0, 0)" ? backgroundColor : "rgba(0, 0, 0, 0)";
21         }
22         $(this).css("background-color", newColor);
23     });
24 }

举个例子:

1 setZebraCrossing($("#oTable2>tbody"), "field12345");

 

ecology8设置明细表的奇偶行底色交错(斑马线)

原文:https://www.cnblogs.com/lroy/p/11653695.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!