html5支持多中浏览器写法,html5及css3对table表格高亮当前行列的多浏览器兼容写法...

html5能轻松实现高亮当前行、指定奇偶行颜色(斑马色)，但纯用css3实现列方向就比较困难，而且在老式IE浏览器也不能兼容。本例就是实现行列高亮，并且兼容IE。本例需要用到jquery。

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

$(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(){

var nu = $(this).parent().children('td').index($(this)[0]);

$("#mytable tr:not(:has(th))").each(

function(i){

$(this).children("td").eq(nu).addClass('rc-hlight');

}

);

$(this).parent().addClass('rc-hlight');

$(this).addClass('foucs-hlight');

},

function(){

var nu = $(this).parent().children('td').index($(this)[0]);

$("#mytable tr:not(:has(th))").each(

function(i){$(this).children("td").eq(nu).removeClass('rc-hlight');}

);

$(this).parent().removeClass('rc-hlight');

$(this).removeClass('foucs-hlight');

}

);

}

);

name	age	id	sex
shiyang	18	001	female
showtime	23	002	male
wuyan	19	003	male
huanlili	89	004	female
nanci	48	005	female