Tablesorter/Drag and drop alternate colors problem
Hi,
I'm using the
Tablesorter Plugin to sort a table when click on the table headers and to give my table alternate colors (with the zebra widget). I also use the
Drag and Drop plugin to drag my table rows to a different order. But here's the problem, if I drag a row to a different order, the colors are no longer correct. Only after I sort my table (with a click on one of the table headers) the colors are correct again.
The code:
- <html>
<head>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8rc3.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="js/jquery.tablednd_0_5.js"></script>
<style type="text/css">
table#users tbody tr.odd td {
background-color:#F0F0F6;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#users").tableDnD();
$("#users").tablesorter({
widgets: ['zebra'],
});
});
</script>
</head>
<body>
<table border="1" id="users">
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Age</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>30</td>
<td>john@doe.com</td>
</tr>
<tr>
<td>Josh</td>
<td>Bark</td>
<td>21</td>
<td>josh@bark.com</td>
</tr>
<tr>
<td>Kim</td>
<td>Lian</td>
<td>33</td>
<td>kim@lian.com</td>
</tr>
<tr>
<td>George</td>
<td>Madison</td>
<td>23</td>
<td>george@madison.com</td>
</tr>
<tr>
<td>Jack</td>
<td>Torn</td>
<td>44</td>
<td>jack@torn.com</td>
</tr>
<tr>
<td>Lisa</td>
<td>Warren</td>
<td>35</td>
<td>lisa@warren.com</td>
</tr>
</tbody>
</table>
</body>
</html>
So my question is: Does anyone know how the colors could stay the same, even when I drag one of the rows in an other order?
Thanks in advance,
Blaabi