这里有一些更有趣的工作代码,更简洁。发布给子孙后代,随时提出改进建议。谢谢你的关注!
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Table Manipulation Test</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.1.custom.css" rel="stylesheet" />
<link rel="stylesheet" href="tablesorter/themes/green/style.css" type="text/css"/>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>
<script type="text/javascript" src="tablesorter/jquery.tablesorter.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#test_table").tablesorter({
sortForce: [[3,0]]
});
$(".group_details").hide();
$(".group_header").click(function(){
var group = $(this).attr("id");
var $expander = $(this).children("td.expanderguy")
if ($("." + group + ":visible").length){
$("." + group + "").fadeOut('fast');
$expander.html("<img src='icons/plus.gif'>");
}
else{
$("." + group + "").fadeIn('fast');
$expander.html("<img src='icons/minus.gif'>");
}
});
$("#test_table").bind("sortEnd",function() {
$('.group_header').each(function(){
var group = $(this).attr("id");
var headerId = $(this).index();
var detailId = $('.' + group + ':first').index();
if (headerId + 1 != detailId){
$(this).insertBefore($('.' + group + ':first'));
}
});
});
});
</script>
<style type="text/css">
.group_header td{
background-color: #888888; !important
}
</style>
</head>
<body>
<table id="test_table" class="tablesorter">
<thead>
<tr><th>First Name</th><th>Last Name</th><th>Email</th><th>Due Date</th><th>Amount Due</th></tr>
</thead>
<tbody>
<tr class="group_header" id="group1"><td class="expanderguy"><img src="icons/plus.gif"></td><td></td><td></td><td>Monday, June 7</td><td></td></tr>
<tr class="group_details group1"><td>Flavian</td><td>Wenceslas</td><td>fwencs@gmail.com</td><td>Monday, June 7</td><td>$100</td></tr>
<tr class="group_details group1"><td>Gordian</td><td>Ives</td><td>gives@gmail.com</td><td>Monday, June 7</td><td>$1700</td></tr>
<tr class="group_details group1"><td>Saladin</td><td>Tarquin</td><td>starquin@gmail.com</td><td>Monday, June 7</td><td>$1700</td></tr>
<tr class="group_details group1"><td>Urban</td><td>Cyprian</td><td>ucyprian@gmail.com</td><td>Monday, June 7</td><td>$1500</td></tr>
<tr class="group_details group1"><td>Sargon</td><td>Swithun</td><td>sswithun@gmail.com</td><td>Monday, June 7</td><td>$1100</td></tr>
<tr class="group_details group1"><td>Pompey</td><td>Ladislas</td><td>pladislas@gmail.com</td><td>Monday, June 7</td><td>$300</td></tr>
<tr class="group_details group1"><td>Attila</td><td>Hiawatha</td><td>ahiawatha@gmail.com</td><td>Monday, June 7</td><td>$200</td></tr>
<tr class="group_header" id="group2"><td class="expanderguy"><img src="icons/plus.gif"></td><td></td><td></td><td>Tuesday, June 8</td><td></td></tr>
<tr class="group_details group2"><td>Bruce</td><td>Fenton</td><td>bfenton@gmail.com</td><td>Tuesday, June 8</td><td>$1700</td></tr>
<tr class="group_details group2"><td>Wade</td><td>Sequoia</td><td>wsequoia@gmail.com</td><td>Tuesday, June 8</td><td>$1400</td></tr>
<tr class="group_details group2"><td>Eddie</td><td>Jerold</td><td>ejerold@gmail.com</td><td>Tuesday, June 8</td><td>$1100</td></tr>
<tr class="group_details group2"><td>Lynn</td><td>Lucan</td><td>llucan@gmail.com</td><td>Tuesday, June 8</td><td>$1200</td></tr>
<tr class="group_details group2"><td>Taegan</td><td>Tadg</td><td>ttadg@gmail.com</td><td>Tuesday, June 8</td><td>$100</td></tr>
<tr class="group_details group2"><td>Clyde</td><td>Reed</td><td>creed@gmail.com</td><td>Tuesday, June 8</td><td>$6100</td></tr>
<tr class="group_details group2"><td>Alaois</td><td>Art</td><td>aart@gmail.com</td><td>Tuesday, June 8</td><td>$2100</td></tr>
<tr class="group_details group2"><td>Gilbert</td><td>Patsy</td><td>gpatsy@gmail.com</td><td>Tuesday, June 8</td><td>$1500</td></tr>
<tr class="group_header" id="group3"><td class="expanderguy"><img src="icons/plus.gif"></td><td></td><td></td><td>Wednesday, June 9</td><td></td></tr>
<tr class="group_details group3"><td>Clem</td><td>Eben</td><td>ceben@gmail.com</td><td>Wednesday, June 9</td><td>$2100</td></tr>
<tr class="group_details group3"><td>Elijah</td><td>Julyan</td><td>ejulyan@gmail.com</td><td>Wednesday, June 9</td><td>$2100</td></tr>
<tr class="group_details group3"><td>Marvyn</td><td>Damian</td><td>mdamian@gmail.com</td><td>Wednesday, June 9</td><td>$1100</td></tr>
<tr class="group_details group3"><td>Sawyer</td><td>Ryker</td><td>sryker@gmail.com</td><td>Wednesday, June 9</td><td>$500</td></tr>
</tbody>
</table>
</body>
