我正在使用表格排序器在客户端“排序”我的表格。但是 - 当我更改订单时，我的行颜色变得困惑。
有人有解决办法吗？ (下面的 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/
最佳答案
我没有看到 JS 文件，但你绝对应该考虑 jQuery tablesorter plug-in .它重量轻，在客户端上执行速度快，并通过排序处理所有斑马条纹/自定义 css。它还适用于 pager add-in .
关于javascript - 可排序表格中的交替行颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4337778/