用jquery使表格变色

jQuery简单实现表格隔行换色+鼠标经过时样式


< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery表格隔行换色+鼠标经过时样式</title>
<script src="http://wlog.cn/lib/jquery/jquery-1.3.2.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#mytable tr").mouseover(function(){
$(this).addClass("t_over");//鼠标移到ID为mytable的表格的tr上时,执行函数
});
$("#mytable tr").mouseout(function(){
$(this).removeClass("t_over");//移除该行的class
});

$("#mytable tr:odd").addClass("t_color");//even----奇数,and odd----偶数

/* $("#mytable2").find("tr").each(function(i){
if(i%2 != 0){
$(this).addClass("t_color");
}
});//each实现表格偶数行换色
*/
})

</script>
<style>
*{margin:0px; padding:0px;}
body {margin-top:20px;}
table {width:600px; margin:0px auto; border-collapse:collapse; border:1px #e4e4e4 solid;}
td,th {border:1px #e4e4e4 solid; text-align:center;}
caption {background:#0099CC; margin:0;}
.t_over {background:#cccccc;}
.t_color {background:#ecf6fc; }
tr,th,caption {line-height:30px;}

</style>
</head>

<body>
<table id="mytable">
<caption>这是一个表格</caption>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>李飞</td>
    <td>21</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李宇</td>
    <td>31</td>
    <td>女</td>
  </tr>
  <tr>
    <td>王三</td>
    <td>33</td>
    <td>女</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>13</td>
    <td>女</td>
  </tr>
</table>

<table id="mytable2">
<caption style="margin-top:30px;">这是一个表格</caption>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>李飞</td>
    <td>21</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李宇</td>
    <td>31</td>
    <td>女</td>
  </tr>
  <tr>
    <td>王三</td>
    <td>33</td>
    <td>女</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>13</td>
    <td>女</td>
  </tr>
</table>
</body>
</html>

 

你可能感兴趣的:(JavaScript,html,jquery,XHTML)