给明细表的奇偶行设置底色交错,可增强视觉效果。
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");