php实例 shell脚本 jquery选择器 python模拟登录 linux命令 nginx apache
当前位置：首页 > 脚本编程 > jquery > jquery表单 > 正文

Jquery 表格颜色交替变化，点击选中行，鼠标移过颜色变化的代码分享

发布时间：2019-08-19编辑：脚本学堂
本文分享一例jquery代码，用于实现表格颜色的交替变化，点击选中行，当鼠标移过颜色变化的代码，有需要的朋友参考学习下。

jquery 实现表格颜色交替变化，点击选中行，鼠标移过颜色变化。
效果如下图：

表格颜色交替变化

1，html部分：
 

复制代码 代码示例:
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="/jquery/1.6.1/jquery.min.js"></script> 
<script type="text/javascript" src="table-row-1.0.js"></script> 
<style type="text/css"> 
.table-tr-title{ 
    height: 26px; 
    font-size: 12px; 
    text-align: center; 
} 
.table-tr-content{ 
    height: 18px; 
    background: #FFFFFF; 
    text-align: center; 
    font-size: 12px; 
} 
.normalEvenTD{ 
    background: #DFD8D8; 
} 
.normalOddTD{ 
    background: #FFFFFF; 
} 
.hoverTD{ 
    background-color: #eafcd5; 
    height: 18px; 
    text-align: center; 
    font-size: 12px; 
} 
.trSelected{ 
    background-color: #51b2f6; 
    height: 18px; 
    text-align: center; 
    font-size: 12px; 
} 
</style> 
</head> 
<body> 
<table width="99%" class="list" style="word-break: break-all" border="0" 
        align="center" cellpadding="0" cellspacing="1" bgcolor="#c0de98"> 
        <tr class="table-tr-title"> 
            <td width="5%">标题</td> 
            <td width="5%">标题</td> 
            <td width="5%">标题</td> 
            <td width="5%">标题</td> 
        </tr> 
        <tr class="table-tr-content"> 
            <td width="5%">数据</td> 
            <td width="5%">数据</td> 
            <td width="5%">数据</td> 
            <td width="5%">数据</td> 
        </tr> 
        <tr class="table-tr-content"> 
            <td width="5%">数据</td> 
            <td width="5%">数据</td> 
            <td width="5%">数据</td> 
            <td width="5%">数据</td> 
        </tr> 
        <tr class="table-tr-content"> 
            <td width="5%">数据</td> 
            <td width="5%">数据</td> 
            <td width="5%">数据</td> 
            <td width="5%">数据</td> 
        </tr> 
        <tr class="table-tr-content"> 
            <td width="5%">数据</td> 
            <td width="5%">数据</td> 
            <td width="5%">数据</td> 
            <td width="5%">数据</td> 
        </tr> 
        <tr class="table-tr-content"> 
            <td width="5%">数据</td> 
            <td width="5%">数据</td> 
            <td width="5%">数据</td> 
            <td width="5%">数据</td> 
        </tr> 
        <tr class="table-tr-content"> 
            <td width="5%">数据</td> 
            <td width="5%">数据</td> 
            <td width="5%">数据</td> 
            <td width="5%">数据</td> 
        </tr> 
        <tr class="table-tr-content"> 
            <td width="5%">数据</td> 
            <td width="5%">数据</td> 
            <td width="5%">数据</td> 
            <td width="5%">数据</td> 
        </tr> 
        <tr class="table-tr-content"> 
            <td width="5%">数据</td> 
            <td width="5%">数据</td> 
            <td width="5%">数据</td> 
            <td width="5%">数据</td> 
        </tr> 
        <tr class="table-tr-content"> 
            <td width="5%">数据</td> 
            <td width="5%">数据</td> 
            <td width="5%">数据</td> 
            <td width="5%">数据</td> 
        </tr> 
        <tr class="table-tr-content"> 
            <td width="5%">数据</td> 
            <td width="5%">数据</td> 
            <td width="5%">数据</td> 
            <td width="5%">数据</td> 
        </tr> 
        <tr class="table-tr-content"> 
            <td width="5%">数据</td> 
            <td width="5%">数据</td> 
            <td width="5%">数据</td> 
            <td width="5%">数据</td> 
        </tr> 
        <tr class="table-tr-content"> 
            <td width="5%">数据</td> 
            <td width="5%">数据</td> 
            <td width="5%">数据</td> 
            <td width="5%">数据</td> 
        </tr> 
</body> 
</html>

2，js脚本部分
 

复制代码 代码示例:
table-row-1.0.js
$(document).ready(function(){ 
    ///////datagrid选中行变色与鼠标经过行变色/////////////// 
    var dtSelector = ".list"; 
    var tbList = $(dtSelector); 
 
    tbList.each(function() { 
        var self = this; 
        $("tr:even:not(:first)", $(self)).addClass("normalEvenTD"); // 从标头行下一行开始的奇数行，行数：（1，3，5...） 
        $("tr:odd", $(self)).addClass("normalOddTD"); // 从标头行下一行开始的偶数行，行数：（2，4，6...） 
 
        // 鼠标经过的行变色 
        $("tr:not(:first)", $(self)).hover( 
            function () { $(this).addClass('hoverTD');$(this).removeClass('table-td-content'); }, 
            function () { $(this).removeClass('hoverTD');$(this).addClass('table-td-content'); } 
        ); 
 
        // 选择行变色 
        $("tr", $(self)).click(function (){ 
            var trThis = this; 
            $(self).find(".trSelected").removeClass('trSelected'); 
            if ($(trThis).get(0) == $("tr:first", $(self)).get(0)){ 
                return; 
            } 
            $(trThis).addClass('trSelected'); 
        }); 
    }); 
});
上一篇：jQuery 操作下拉列表框的实例分享
下一篇：jQuery全选取得选中值的实例代码

与 Jquery 表格颜色交替变化，点击选中行，鼠标移过颜色变化的代码分享 有关的文章

浏览排行

栏目分类

栏目导航

热点文章

关于本站 | 网站地图 | 联系我们 | 免责声明 | 友情链接
鄂ICP备13010364号-22

CopyRight © 2010-2021 脚本学堂 Jb200.com , All Rights Reserved.