Jquery 创建可恢复的样式的最佳方法

我正在创建许多不同的表，这些表由db驱动，跨越许多不同的页面，我希望在这些页面上使用一致的样式：

第一行和最后一行：粗体字体-反转前景/背景 所有其他行都有斑马条纹

基本上只是实现“页眉/页脚”行和斑马条纹数据行。 我看到了一些jQuery示例，并对其进行了一点讨论，但不足以确信没有更好的CSS，也不知道推广这一点的最佳方法，因此它最容易重用

如果可以的话，希望看到一些示例将css与jquery进行比较

---

thx

只要使用CSS，您就可以为trs创建类，并在构建表时分配它们。大概是这样的：

tr bold { font-weight: bold; } /* for first and last */
tr even { background-color: #fff; }
tr odd  { background-color: #ddd; } /* for zebra rows */

.decoration table { background-color: white;}
.decoration thead, .decoration tfoot { font-color:white; background-color:black; }
.decoration tbody tr.even td {background-color:gray;}
.decoration tbody tr.odd td {background-color:white;}

然后，在构建表时应用所述类

---

在jQuery中，您可以通过trs使用循环，检查它们是偶数还是奇数，并应用正确的样式，然后使用：first child和：last child选择器设置第一行和最后一行的粗体。

有一个很棒的jQuery插件叫datatables，但它可能对您来说有些过分

就CSS而言，只要将干净的表标记与THEAD和TFOOT一起使用，就应该可以了

<TABLE>
<THEAD>
     <TR> ...header information...
</THEAD>
<TFOOT>
     <TR> ...footer information...
</TFOOT>
<TBODY>
     <TR> ...first row of block one data...
     <TR> ...second row of block one data...
</TBODY>
<TBODY>
     <TR> ...first row of block two data...
     <TR> ...second row of block two data...
     <TR> ...third row of block two data...
</TBODY>
</TABLE>

---

除了接受的答案和对IE6消失的希望之外，你可以考虑伪选择器。比如：

tbody tr:nth-child(2n+1) { background-color: #abcdef; } 
tbody tr:nth-child(2n) { background-color: #012345; }

这两种颜色加上奇数和偶数。然后提供更流畅的用户体验：

tbody tr:hover { background-color: #ffffff; } /* highlight row */
tbody td:hover { background-color: #eeeeee; } /* highlight cell */

---

难道不能通过使用标记中的和部分来避免：first child和：last child选择器，从而避免jQuery altoghether吗？当然，他还得为斑马条纹做些别的事情。你是说tr.bold、tr.偶数和tr.odd吗？为什么不将.bold类替换为语义更丰富的类，如.first或.last？很酷，我希望您使用数据表。这是一个很棒的插件，有一个非常好的社区。