表格过滤器

12/6/2015来源:Javascript教程人气:1192

<!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=utf-8" />
<title>表格过滤器</title>
<script language="javascript" src="../MyfirstjQueryFileWord/jquery-1.10.2.js">
</script>
<script language="Javascript">
$(function(){
    /*
    //第一种方法
    $('.a').CSS('background','#f00');
    $('.b').css('background','#f0f');
    $('.c').css('background','#00f');
    $('.d').css('background','#ff0');
    $('.e').css('background','#f0f');
    */
    /*
    //第二种方法
    $('table tr:first').css('background-color','#f00');
    $('table tr:last').css('background-color','#f00');    
    $('table tr:odd').css('background-color','#f00');
    */    
    $('table tr:even').css('background-color','#f00');
    });
    
    
 /* 当鼠标移到表格上是,当前一行背景变色 */
      $(document).ready(function(){
            $(".data_list tr td").mouSEOver(function(){
                $(this).parent().find("td").css("background-color","#d5f4fe");
            });
      })
      /* 当鼠标在表格上移动时,离开的那一行背景恢复 */
      $(document).ready(function(){ 
            $(".data_list tr td").mouseout(function(){
                var bgc = $(this).parent().attr("bg");
                $(this).parent().find("td").css("background-color",bgc);
            });
      })

    
    
</script>
</head>
<body>
<center>
<table width="500" border="1" height="500">
  <tr>
    <td class="a">&nbsp;</td>
  </tr>
  <tr>
    <td class="b">&nbsp;</td>
  </tr>
  <tr>
    <td class="c">&nbsp;</td>
  </tr>
  <tr>
    <td class="d">&nbsp;</td>
  </tr>
  <tr>
    <td class="e">&nbsp;</td>
  </tr>
</table>
</center>
</body>
</html>