复选框,选中行换色及鼠标滑过换色

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <title>隔行换色与双击数据更新</title>
        <style>
            table {width:600px;border:0px;border-collspase;}
            td{ padding:2px; width:100px;text-align:center; vertical-align:middle;}
            th{font:bold:12px/17px arial; text-align:left;padding:4px;border_botton:1px solid #333;}
            .dan{background:#CF0}
        .ou{background:#0ff}
        .ed{background:#669;color:#66C;}
    </style>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
                //设置偶数行和奇数行

                $("tbody>tr:odd").addClass("ou");                                                              //table tbody tr跟tbody>tr作用一样
                $("tbody>tr:even").addClass("dan");
                $("tbody>tr:has(:checked)").addClass("ed");                                                   //js只要一处错误,就会报错不出结果
                //搜索被选中的has(:checked)

				//$(this)[hased?"removeClass":"addClass"]("ed")
				//.find(":input").attr("checked",!hased);
                    
              $("tbody>tr").click(function(){
                    var hased=$(this).hasClass("ed");
                     
						if(hased){
                        $(this).removeClass("ed").find(":input").attr("checked",false);
                    }else{
                        $(this).addClass("ed").find(":input").attr("checked",true);
                        }//这段代码与上面那行作用一样,用来判断被选中的行
                        
                    });

		
                //遍历指定触发函数
                 **************************/
                });
    </script>
    </head>

    <table>

        <thead>
            <tr><th></th><th>标题</th><th>时间</th><th>地点</th></tr>
        </thead>
        <tbody>
            <tr><td><input type="checkbox" name="choice" value=""/></td><td>php视频1</td><td>2011</td><td>上海</td></tr>
            <tr><td><input type="checkbox" name="choice" value=""/></td><td>php视2频</td><td>2012</td><td>广州</td></tr>
            <tr><td><input type="checkbox" name="choice" value=""/></td><td>php视频3</td><td>2014</td><td>长海</td></tr>
            <tr><td><input type="checkbox" name="choice" value=""/></td><td>php视频4</td><td>1999</td><td>北京</td></tr>
            <tr><td><input type="checkbox" name="choice" value=""/></td><td>php视频5</td><td>2012</td><td>武汉</td></tr>
            <tr><td><input type="checkbox" name="choice" value=""/></td><td>php视频6</td><td>2004</td><td>郑州</td></tr>
    </tbody>
</table>
</html>

你可能感兴趣的:(复选框,选中行换色及鼠标滑过换色)