html表格显示选择的颜色,jquery实现效果比较好的table选中行颜色

jquery table选中行颜色(效果更好)

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

}

align="center" cellpadding="0" cellspacing="1" bgcolor="#c0de98">

标题标题标题标题数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据

js代码：

$(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');

});

});

});

效果显示：