jQuery 事件优化 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style>
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    table td{
        border:1px solid #CCCCCC;
    }
    .rowHover{
        background-color: #F5F5DC;
    }
  </style>
  <script src="jquery.js" type="text/javascript"></script>
  <script>
    $(document).ready(function(){
        $("#table").click(function(e){
            var target = $(e.target);
            if(target.is("td")){
                if(target.hasClass("class1")){
                    alert("td1");
                } else if(target.hasClass("class2")){
                    alert("td2");
                } else {
                    return false;
                }
                alert(target.parents("tr").attr("id"));
            } else {
                target = target.parents("td");
                if(target.hasClass("class1")){
                    alert("td1");
                } else if(target.hasClass("class2")){
                    alert("td2");
                } else {
                    return false;
                }
                alert(target.parents("tr").attr("id"));
            }
        }).mouseover(function(e){
            var ele = $(e.target).parents("tr");
            ele.addClass("rowHover");
        }).mouseout(function(e){
            var ele = $(e.target).parents("tr");
            ele.removeClass("rowHover");
        });

    });
  </script>
 </head>

 <body>
  <table id="table" >
    <tr id="1"><td class="class1">1</td><td class="class2"><div>1</div></td></tr>
    <tr id="2"><td class="class1">2</td><td class="class2">2</td></tr>
    <tr id="3"><td class="class1">3</td><td class="class2">3</td></tr>
    <tr id="4"><td class="class1">4</td><td class="class2">4</td></tr>
    <tr id="5"><td class="class1">5</td><td class="class2">5</td></tr>
    <tr id="6"><td class="class1">6</td><td class="class2">6</td></tr>
    <tr id="7"><td class="class1">7</td><td class="class2">7</td></tr>
    <tr id="8"><td class="class1">8</td><td class="class2">8</td></tr>
    <tr id="9"><td class="class1">9</td><td class="class2">9</td></tr>
    <tr id="10"><td class="class1">10</td><td class="class2">10</td></tr>
  <table>
 </body>
</html>



posted @ 2011-12-29 17:34  Nicholas1984  阅读(80)  评论(0)    收藏  举报