`

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

jQueryCSSXHTMLHTML 
阅读更多 
<!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");
分享到：
| 利用事件冒泡，把相应的处理程序绑定到相应 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics