[jQuery] appendTo and tbody
I'm using some sort code I found on the mailing list to sort a table. I can't use tablesorter because I have groups of heterogeneous rows grouped with tbody tags. Anyway, the code seems to be working well except that the appendTo is appending my tbody groups inside an extra tbody tag which seems to be created by the appendTo(). This seems wrong. Anyone have any ideas?
Here's my sort code:
// jQuery sort plugin functionality
jQuery.fn.sort = function() {
return this.pushStack( [].sort.apply( this, arguments ), []);
};
function sortByName(){
$('#maintable > tbody').sort(function(a,b){
return $('.fullname', a).text() > $('.fullname', b).text() ? 1 : -1;
}).remove().appendTo('#maintable');
}
HTML is as follows to start:
<table id="maintable">
<thead>
<tr>
<th><a href="#" onclick="sortByName();return false;">Name</a></th>
<th>ID</th>
<th>Email</th>
</tr>
</thead>
<tbody class="user">
<tr>
<td class="fullname">John Doe</td>
<td>12345</td>
<td>john@adomain.com</td>
</tr>
<tr>
<td colspan="3">
<table border="0">
<tr><th>Header 1</th><th>Header 2</th></tr>
<tr><td>Data 1</td><td>Data 2</td></tr>
<tr><td>Data 1</td><td>Data 2</td></tr>
</table>
</td>
</tr>
</tbody>
<tbody class="user">
<tr>
<td class="fullname">William Jones</td>
<td>32456</td>
<td>william@adomain.com</td>
</tr>
<tr>
<td colspan="3">
<table border="0">
<tr><th>Header 1</th><th>Header 2</th></tr>
<tr><td>Data 1</td><td>Data 2</td></tr>
<tr><td>Data 1</td><td>Data 2</td></tr>
</table>
</td>
</tr>
</tbody>
</table>
Afer I run the sort (notice the surrounding tbody tag) it is like:
<table id="maintable">
<thead>
<tr>
<th><a href="#" onclick="sortByName();return false;">Name</a></th>
<th>ID</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tbody class="user">
<tr>
<td class="fullname">William Jones</td>
<td>32456</td>
<td>william@adomain.com</td>
</tr>
<tr>
<td colspan="3">
<table border="0">
<tr><th>Header 1</th><th>Header 2</th></tr>
<tr><td>Data 1</td><td>Data 2</td></tr>
<tr><td>Data 1</td><td>Data 2</td></tr>
</table>
</td>
</tr>
</tbody>
<tbody class="user">
<tr>
<td class="fullname">John Doe</td>
<td>12345</td>
<td>john@adomain.com</td>
</tr>
<tr>
<td colspan="3">
<table border="0">
<tr><th>Header 1</th><th>Header 2</th></tr>
<tr><td>Data 1</td><td>Data 2</td></tr>
<tr><td>Data 1</td><td>Data 2</td></tr>
</table>
</td>
</tr>
</tbody>
</tbody>
</table>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/