Jquery表格奇偶行不同颜色，点击标题栏实现排序

dongguojun · 发表于 2013-2-7 20:38:20

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>Untitled Page</title> <script type="text/javascript" src="Jquery/jquery-1[1].3.2.min.js"></script> <script type="text/javascript" src="Jquery/HTMLPage3.js"></script> <link type="text/css" rel="Stylesheet" href="css/HTMLPage3.css" /></head><body><table class="sortable" border=1> <thead> <tr> <th class="sort-alpha">Title</th> <th>Author</th> <th>Content</th> </tr> </thead> <tbody> <tr> <td>DeadNotes</td> <td>David</td> <td>aaaaaaaaa</td> </tr> <tr> <td>Crate</td> <td>Author</td> <td>bbbbbbbb</td> </tr> <tr> <td>Bob</td> <td>Author</td> <td>cccccccc</td> </tr> </tbody> </table></body></html>

.hoverstyle{background-color:Purple;}.odd{background-color:Yellow;}.even{background-color:Blue;}.clickable{background-color:Red;}

var alterRowColor=function($table){ $("table.sortable tbody tr:odd").removeClass().addClass("odd"); $("table.sortable tbody tr:even").removeClass().addClass("even"); return this;};$(document).ready(function(){ //找到类名为sortable的table标签 $("table.sortable").each(function(){ var $_table=$(this); alterRowColor($_table); //找到这个table下的th标签，并遍历它，并把它的每一列都赋值给回调函数 $("th",$_table).each(function(column){ //判断找到的th标签的class属性是否是sort-alpha if($(this).is(".sort-alpha")) { //为他添加css样式 $(this).addClass("clickable"); //为他添加单击属性 $(this).click(function(){ //找到所有所需table下tbody标签下的tr标签组 var rows=$_table.find("tbody>tr").get(); //遍历rows数组并把每行的td子节点的当前列的列值转化为大写字母 $.each(rows,function(index,row){ row.sortKey=$(row).children("td").eq(column).text().toUpperCase(); }); //排序一列的值 rows.sort(function(a,b){ if(a.sortKey<b.sortKey) { return -1; } if(a.sortKey>b.sortKey) { return 1; } return 0; }); //把排序好的每行插入tbody标签内 $.each(rows,function(index,row){ $_table.children("tbody").append(row); row.sortKey=null; }); alterRowColor($_table); }); } }); });});

为排序后的列进行高亮显示，column是从1开始的，所以这里要进行高亮的列是需要加1，一边用户知道哪里进行了排序
$($_table).find("td").removeClass().filter(":nth-child("+(column+1)+")").addClass("highlight");

		自动登录	找回密码
密码			立即注册