在可排序表中交替行颜色答案

【问题标题】：Alternating row colors in a sortable table在可排序表中交替行颜色
【发布时间】：2010-12-02 17:15:54
【问题描述】：

我正在使用表格分类器在客户端“排序”我的表格。但是 - 当我更改订单时，我的行颜色会变得混乱。

有人有解决办法吗？（如果您想“尝试”，请在下面的 js 文件中）

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><head>
    <title></title>
    <script type="text/javascript" src="js/sorttable.js"></script>
    <style type="text/css">
     table.sortable thead { background-color:#DF7C1B; color:#ffffff; font-weight:bold; font-size:12px;}
     .datatable-evenrow { background-color:#FFC68F;}
     .datatable-rowhighlight { background-color: #8E9DBE; }
     .datatable-labelrow { background-color:#EF943B; }
    </style>
    </head>
    <body>
    <table class="sortable" > 
        <thead>
        <tr class="datatable-labelrow" >
        <td class="">NAME</td>
        <td class="">CODE</td>
        <td class="">ADDRESS</td>
        <td class="">CITY</td>
        <td class="">STATE</td>
        <td class="">ZIP</td>
        <td class="">PHONE</td>
        <td class="">FAX</td>
    </tr>
    </thead>

    <tbody>
    <tr  onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className=''" >
        <td>EC, INC</td>
        <td>234567</td>
        <td>222 street</td>
        <td>ELMHURST</td>
        <td>IL</td>
        <td>60000</td>
        <td></td>
        <td></td>
    </tr>
 <tr class="datatable-evenrow" onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className='datatable-evenrow'" >
        <td>EC, INC</td>
        <td>4322234</td>
        <td>702 road</td>
        <td>ELMHURST</td>
        <td>IL</td>
        <td>60000</td>
        <td></td>
        <td></td>
    </tr>
 <tr onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className=''" >
        <td>AAA AMERICA, INC</td>
        <td>1111112222222</td>
        <td>1458 avenue Ave</td>
        <td>ITASCA</td>
        <td>IL</td>
        <td>60143</td>
        <td></td>
        <td></td>
    </tr>
 <tr class="datatable-evenrow" onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className='datatable-evenrow'" >
        <td>Likeme & likeme P.C.</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>00000</td>
        <td></td>
        <td></td>
    </tr>
 <tr onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className=''" >
        <td>OFFICE STUFF, INC.</td>
        <td>3333444</td>
        <td>55555 Fifth Ave</td>
        <td>NY</td>
        <td>NY</td>
        <td>02020</td>
        <td></td>
        <td></td>
    </tr>
 <tr class="datatable-evenrow" onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className='datatable-evenrow'" >
        <td>RepServe Inc.</td>
        <td>54321</td>
        <td>P.O. Box 3099</td></td>
        <td>Heresville</td>
        <td>HR</td>
        <td>44000</td>
        <td></td>
        <td></td>
    </tr>
 <tr onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className=''" >
        <td>SCHNEIDER'S SCHNOUSERS INC.</td>
        <td>654543</td>
        <td>3101 S. PACKERLAND DR.  P.</td>
        <td>Dog Town</td>
        <td>Delaware</td>
        <td>000077</td>
        <td>Dan D. Dog</td>
        <td>800-600-3366</td>
    </tr>
 <tr class="datatable-evenrow" onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className='datatable-evenrow'" >
        <td>SIMPLE DISTRIBUTORS, LLC</td>
        <td>444</td>
        <td>235255 Drive Way</td>
        <td>CHICAGO</td>
        <td>IL</td>
        <td>60606</td>
        <td></td>
        <td></td>
    </tr>
 <tr onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className=''" >
        <td>SIMPLE DISTRIBUTORS, LLC</td>
        <td>1234 </td>
        <td>xxxoooo</td>
        <td>DETROIT</td>
        <td>MI</td>
        <td>40606</td>
        <td></td>
        <td></td>
    </tr>
 <tr class="datatable-evenrow" onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className='datatable-evenrow'" >
        <td>AAA ,INC.</td>
        <td>83300</td>
        <td>OFFICEITEMS.COM</td>
        <td>SOUTH ELGIN</td>
        <td>IL</td>
        <td>60177</td>
        <td></td>
        <td></td>
    </tr>
 <tr onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className=''" >
        <td>BBB,INC.</td>
        <td>156302</td>
        <td>BBB.COM</td>
        <td>SOUTH ELGIN</td>
        <td>IL</td>
        <td>60177</td>
        <td></td>
        <td></td>
    </tr>
 <tr class="datatable-evenrow" onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className='datatable-evenrow'" >
        <td>CCC, INC</td>
        <td>305792</td>
        <td>333 ELKHART RD.</td>
        <td>GOSH</td>
        <td>SD</td>
        <td>76526</td>
        <td></td>
        <td></td>
        </tr>
 <tr onMouseOver="this.className='datatable-rowhighlight'"     onMouseOut="this.className=''" >
            <td>CCC</td>
            <td></td>
            <td>UPRIGHT</td>
            <td>P.O. BOX 228</td>
            <td>FL</td>
            <td>00000</td>
            <td></td>
            <td></td>
        </tr>
        </tbody>

        <tfoot>
        <tr class="datatable-footerrow">
         <td colspan="10" class="datatable-footercell">Showing 1-x of x Records  </td>
        </tr>
        </tfoot>
    </table>
    </body>
    </html>

对于 sorttable.js，请参阅 http://www.kryogenix.org/code/browser/sorttable/

【问题讨论】：

+1 表示 stackoverflow 上最长的帖子...

标签： javascript css sorttable.js

【解决方案1】：

我没有看到 JS 文件，但你绝对应该考虑jQuery tablesorter plug-in。它是轻量级的，在客户端上执行速度很快，并且可以通过排序处理您所有的斑马条纹/自定义 css。它也适用于pager add-in。

【讨论】：

+1。我最近第一次实现了这个插件，很棒。可排序，可分页（使用另一个插件），并在排序后进行斑马条纹。非常不错的插件。
OOPS - 不知道 js 是如何被丢弃的......这里是'tiz。

【解决方案2】：

甚至不用担心类名或任何东西。只需在您的 CSS 中执行此操作：

table.sortable tbody tr:nth-child(even) td {
    background-color: #FFC68F;
}

【讨论】：

Brandon - 就简洁高效的代码而言，这就是 BOMB - 正是我想要的 - 不幸的是，它在 IE 中不起作用......强迫我们的客户使用 FF，我需要一个适用于两者的解决方案......谢谢......TONS..
如果你关心这种事情，这对浏览器的支持很差。

【解决方案3】：

排序后，您需要为行重新分配类名。

【讨论】：