当前位置： 文江博客话题详情

在可排序表中交替行颜色

发布于 2024-10-06 08:53:39 字数 7216 浏览 1 评论 0原文

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

有人有解决办法吗？ （如果您想“尝试一下”，请查看下面的 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/

原文

I'm using a table sorter to 'order' my tables on the client side. However - when I change an order, my row colors get messed up.

does anyone have a solution?
(js file below if you want to 'try it')

  <!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>

For sorttable.js see http://www.kryogenix.org/code/browser/sorttable/

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

我的奇迹 2024-10-13 08:53:39

我没有看到 JS 文件，但您绝对应该考虑 jQuery tablesorter 插件。它是轻量级的，在客户端上执行速度快，并通过排序处理所有斑马条纹/自定义 CSS。它还可以与寻呼机插件配合使用。

I don't see the JS file, but you should definitely consider the jQuery tablesorter plug-in. It's lightweight, performs fast on the client, and handles all your zebra-striping/custom css with sorting. It also works with a pager add-in.

回复 原文
a√萤火虫的光℡ 2024-10-13 08:53:39

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

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

Don't even worry about class names or anything. Just do this in your css:

table.sortable tbody tr:nth-child(even) td {
    background-color: #FFC68F;
}
回复 原文
公布 2024-10-13 08:53:39

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

After the sort you need to re-assign the class names for the rows.

回复 原文
~没有更多了~

关于作者

温柔戏命师

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

linfzu01

文章 0 评论 0

§对你不离不弃

文章 0 评论 0

可遇━不可求

文章 0 评论 0

枕梦

文章 0 评论 0

qq_3LFa8Q

文章 0 评论 0

JP

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文