你可以采用colgroup标签或者找出和td同列的所有td设置相同背景色。下面我用colgroup做的:
[code="html"]
body {
font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
background: #E6EAE9;
}
#mytable {
width: 700px;
padding: 0;
margin: 0;
text-align : center ;
}
.table-heading{
font-family : Georgia, serif;
font-size : 18px ;
color : blue ;
background-color : yellow ;
}
.odd{
background-color : #ffc; /*奇数行浅黄*/
}
.even{
background-color : #cef ;/*偶数行浅蓝*/
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
font-size:11px;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
.tdhlight{
color : red ;
font-weight : 900 ;
}
.rc-hlight{
background-color : #cc99ff ;}
.foucs-hlight{
background-color : #ff6600 ;}
.hidden{
display : none ;}
.column{
width : 500px ;
background-color : #123
}
/**
*这里我注释了,因为你在td设置的背景色会覆盖col上的背景色。
$(document).ready(
function(){
// $('tr:odd').addClass('odd');
// $('tr:even').addClass('even');
$('th').parent().addClass('table-heading');
// $('tr:not([th]):even').addClass('even');
// $('tr:not([th]):odd').addClass('odd');
$('tr:not(:has(th)):odd').addClass('odd');
$('tr:not(:has(th)):even').addClass('even');
$('td:contains("showtime")').siblings().addClass('tdhlight');
}
);
**/
$(document).ready(
function(){
$('#mytable td').hover(
function(){
//这里也提取了变量,如果同一对象多次访问,我们最后用设定变量,这样可以提高JS效率
var td = $(this) , tr = td.parent();
tr.addClass('rc-hlight');
//td.addClass('foucs-hlight');
var nu = tr.children("td").index(td[0]);
console.info(nu)
$("#col_" + nu).addClass("column");
},
function(){
var td = $(this) , tr = td.parent();
tr.removeClass('rc-hlight');
//td.removeClass('foucs-hlight');
var nu = tr.children("td").index(td[0]);
$("#col_" + nu).removeClass("column");
}
);
}
);
name |
age |
id |
sex |
shiyang |
18 |
001 |
female |
showtime |
23 |
002 |
male |
wuyan |
19 |
003 |
male |
huanlili |
89 |
004 |
female |
nanci |
48 |
005 |
female |
[/code]