双色表格的实现因为Jquery强大的选择器变的非常的简单。尤其是:even和:odd两个选择器。
先来个最简单的,奇数偶数行不同色。先定义一下样式。
.even{ background-color:#C0C0C0; } .odd{ background-color:#0f0f0f; }
然后初始化时候的方法。
$(document).ready(function(){ $("tr:even").addClass("even"); });
同理,列不同色也很好做的。
$(document).ready(function(){ $("td:even").addClass("even"); });
然后就是不相同格子不同色。这个的实现原理就是奇数行选偶数列,偶数行选技术列。
$(document).ready(function(){ $("tr:odd td:even").addClass("odd"); $("tr:even td:odd").addClass("odd"); });