javascript和JQuery焦点图和代码特效大全
当前最流行的开源CMS网站系统大全
当前位置:IT技术 > WEB前端 > JQuery >

Jquery实现表格隔行变色,点击选中行

来源:IT技术网编辑:香独秀发布于:2013-09-03人围观实现表格JQuery隔行变色

Jquery插件实现表格隔行变色,点击后选中行,鼠标经过行颜色变化。具体代码如下:

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.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>

javascript代码(table.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,相关的文章
有时间的话来看看IT界的突发事件