Jquery 实现表格颜色交替变化，点击选中行，鼠标移过颜色变化。

最新推荐文章于 2021-10-27 18:05:33 发布

猫大叔

最新推荐文章于 2021-10-27 18:05:33 发布

阅读量6.8k

点赞数 2

分类专栏： Javascript Jquery 文章标签： jquery表格 javascript 表格

本文链接：https://blog.csdn.net/wiker_yong/article/details/10434813

版权

Jquery 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

Javascript

4 篇文章 0 订阅

订阅专栏

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

源码（Demo）打包免积分下载地址：http://download.csdn.net/detail/yangwei19680827/6025045

html代码如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/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>

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');
        });
    });
});

猫大叔

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
Jquery 实现表格颜色交替变化，点击选中行，鼠标移过颜色变化。

Jquery 实现表格颜色交替变化，点击选中行，鼠标移过颜色变化效果图如下：源码（Demo）打包免积分下载地址：http://download.csdn.net/detail/yangwei19680827/6025045html代码如下：.table-tr-title{ height: 26px; font-size: 12px; text-align: c
复制链接

扫一扫