html5及css3对table表格高亮当前行列的多浏览器兼容写法
html5能轻松实现高亮当前行、指定奇偶行颜色（斑马色），但纯用css3实现列方向就比较困难，而且在老式IE浏览器也不能兼容。本例就是实现行列高亮，并且兼容IE。本例需要用到jquery。
<style type="text/css">
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 ;}
</style>
<script src="js/jquery-1.7.1.min.js"></script>
<script>
$(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');
}
);
}
);
</script>
<table id="mytable" cellspacing="0">
<tr>
<th>name</th>
<th>age</th>
<th>id</th>
<th>sex</th>
</tr>
<tr>
<td>shiyang</td>
<td>18</td>
<td>001</td>
<td>female</td>
</tr>
<tr>
<td>showtime</td>
<td>23</td>
<td>002</td>
<td>male</td>
</tr>
<tr>
<td>wuyan</td>
<td>19</td>
<td>003</td>
<td>male</td>
</tr>
<tr>
<td>huanlili</td>
<td>89</td>
<td>004</td>
<td>female</td>
</tr>
<tr>
<td>nanci</td>
<td>48</td>
<td>005</td>
<td>female</td>
</tr>
</table>
相关文章
本文作者：漫游
文章标题： html5及css3对table表格高亮当前行列的多浏览器兼容写法
本文地址：http://www.roammemo.com/html5/86.html
版权声明：若无注明，本文皆为“漫游的备忘录”原创，转载请保留文章出处。
本文地址：http://www.roammemo.com/html5/86.html
版权声明：若无注明，本文皆为“漫游的备忘录”原创，转载请保留文章出处。
漫游的备忘录
标签
链接