jQuery数据表格(点击表头排序,有点问题)

html代码: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Table</title> <link href="../css/table.css" mce_href="css/table.css" rel="stylesheet" type="text/css" /> <mce:script src="../js/jquery-1.3.1.js" mce_src="js/jquery-1.3.1.js" type="text/javascript"><!-- // --></mce:script> <mce:script type="text/javascript"><!-- $(function(){ $("tr:even").addClass("even"); $("tr:odd").addClass("odd"); $("tbody>tr").hover(function(){ $(this).addClass("selected"); }, function(){ $(this).removeClass("selected"); }); $(":input").keyup(function(){ $("tbody tr").hide().filter(":contains('" + ($(this).val()) + "')").show(); }); var $line = $("tbody tr"); $("thead th").click(function(){ var index,size; var neworder = ""; var selectRow = new Array(); $(this).addClass("color","#0f0"); for(var i = 0; i < $("thead th").length ;i++){ if($(this).text() == $("thead th").eq(i).text()){ index = i; } } for (var i = 0; i < $line.length; i++) { selectRow.push($line.eq(i).children().eq(index)); } size = selectRow.length; if (size > 1) { var min; var flag = 0; for (var i = 0; i < size - 1; i++) { min = selectRow[i]; var index; for (var j = i + 1; j < size; j++) { if (selectRow[j].text() < min.text()) { min = selectRow[j]; flag = 1; index = j; } } if (flag) { if(min.parent().next().html() == null){ var swap = min.parent().prev(); min.parent().insertBefore(selectRow[i].parent()); if(swap != selectRow[i].parent()){ selectRow[i].parent().insertAfter(swap); } }else{ var nextParent = min.parent().next(); min.parent().insertBefore(selectRow[i].parent()); selectRow[i].parent().insertBefore(nextParent); } var swap = selectRow[index]; selectRow[index] = selectRow[i]; selectRow[i] = swap; } flag = 0; } } $("tr:even").addClass("even"); $("tr:odd").addClass("odd"); }); }) // --></mce:script> </head> <body> <div><br/>筛选:<input id="filterName" /><br/></div> <table> <thead> <tr><th class="name">姓名</th><th class="sex">性别</th><th class="address">暂住地</th></tr> </thead> <tbody> <tr><td>张山</td><td>男</td><td>浙江宁波</td></tr> <tr><td>李四</td><td>女</td><td>浙江杭州</td></tr> <tr><td>王五</td><td>男</td><td>湖南长沙</td></tr> <tr><td>赵六</td><td>男</td><td>浙江温州</td></tr> <tr><td>Rain</td><td>男</td><td>浙江杭州</td></tr> <tr><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr> <tr><td>王六</td><td>男</td><td>浙江杭州</td></tr> <tr><td>李字</td><td>女</td><td>浙江杭州</td></tr> <tr><td>1</td><td>男</td><td>湖南长沙</td></tr> <tr><td>2</td><td>女</td><td>浙江杭州</td></tr> <tr><td>4</td><td>男</td><td>浙江杭州</td></tr> <tr><td>3</td><td>女</td><td>浙江杭州</td></tr> <tr><td>5</td><td>男</td><td>湖南长沙</td></tr> </tbody> </table> </body> </html>

 

css代码

table { background-color: #FFFFFF; border-collapse: collapse; border: none; border-left: 1px solid #d9d9d9; margin: 10px 0 0 0; } div { font: normal 12px / 17px Arial; } td { font: normal 12px / 17px Arial; padding: 2px; width: 100px; border-bottom: 1px solid #f00; cursor : pointer; } th { font: bold 12px / 17px Arial; text-align: center; padding: 4px; width: 100px; font: 11px tahoma; color: #484848; font-weight: bold; background: #FFF url( '../img/header.jpg' ) repeat-x bottom left; border: 1px solid #d9d9d9; } .even { background: #c8c8c8; } /* 偶数行样式*/ .odd { background: #d4dbee; } /* 奇数行样式*/ .selected { background: #4e95ec; color: #fff; }

 

 

你可能感兴趣的:(jQuery数据表格(点击表头排序,有点问题))