简单的表格移入移入行变色，选中变色，全选变色效果

最新推荐文章于 2021-11-20 21:22:21 发布

weixin_34097242

最新推荐文章于 2021-11-20 21:22:21 发布

阅读量144

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/u/1000159/blog/144129

版权

2019独角兽企业重金招聘Python工程师标准>>>

一个很简单的表格移入移出，选择效果，jquery做的。初学效果图

<!DOCTYPE html>
<html>
    <head>
        <meta  charset="utf-8" />
        <title>jquery+html5+css3 动态时钟</title>
        <style>
        #dome{height:380px;width:550px;border:1px solid #ccc;}
        #head{background:#F6AE38;height:25px;line-height:25px;text-align: center;border-radius: 5px 5px 0 0;margin:5px 5px 0 5px;}
        #table2 table{width:540px;text-align: center;border:1px solid #ccc;background:#f0f0f0;margin:0 5px 0 5px;} 
        #table1{overflow: auto;height:280px;}
        #table1 table{width:520px;text-align: center;border:1px solid #ccc;background:#f0f0f0;margin:5px;} 
        thead th{background:red;}
         tr{border-bottom:1px solid #000;background:#ccc;}
        </style>
             <script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
        <script>
        $(function(){
             var aInput=$("tr td input");
             var aTr=$("tbody tr");
        aInput.click(function(index){// 点击复选框效果
           if($(this).attr("checked")=="checked"){
              $(this).attr("checked",false);
              aTr[index].css("background","#ccc");
           }else{
              $(this).attr("checked",true);
              aTr[index].css("background","#F6AE38");
           }
        })
        aTr.click(function(){    //点击选择效果
                if($(this).find("input").attr("checked") == "checked"||aTr.attr("background")=="#F6AE38"){
                   $(this).find("input").attr("checked",false);
                   $(this).css("background","#ccc");
                }else{

                    $(this).find("input").attr("checked",true);
                    $(this).css("background","#F6AE38");
                }
         })

       aTr.hover(function(){  //移入移除效果
            if( $(this).find("input").attr("checked") != "checked"){
              $(this).css("background","#334666");
            } },function(){
                if( $(this).find("input").attr("checked") != "checked")
                 $(this).css("background","#ccc");
             })

         $("#choose input").click(function(){//全选
                 aInput.attr("checked",true);
                 aTr.css("background","#F6AE38");
             })
        })
        </script>
    </head>
    <body>
    	<div id="dome">
    	<div id="head">标题</div>
    	<div id="table2">
            <table>
                <thead>
                <tr><th style="width:80px;text-indent:-99999px">f </th><th style="width:35px;">id</th><th style="width:95px;">价格</th><th style="width:288px;">名字</th></tr>
    		 </thead>
            </table>
        </div>
    	<div id="table1">
    	<table>
    		<tbody>
    			<tr><td><input type="checkbox"/></td><td>2</td><td>678</td><td>fdfgdgdfg</td></tr>
    			<tr><td><input type="checkbox"/></td><td>2</td><td>678</td><td>fdfgdgdfg</td></tr>
    			<tr><td><input type="checkbox"/></td><td>2</td><td>678</td><td>fdfgdgdfg</td></tr>
    			<tr><td><input type="checkbox"/></td><td>2</td><td>678</td><td>fdfgdgdfg</td></tr>
    			<tr><td><input type="checkbox"/></td><td>2</td><td>678</td><td>fdfgdgdfg</td></tr>
    			<tr><td><input type="checkbox"/></td><td>2</td><td>678</td><td>fdfgdgdfg</td></tr>
    			<tr><td><input type="checkbox"/></td><td>2</td><td>678</td><td>fdfgdgdfg</td></tr>
    			<tr><td><input type="checkbox"/></td><td>2</td><td>678</td><td>fdfgdgdfg</td></tr>
    			<tr><td><input type="checkbox"/></td><td>2</td><td>678</td><td>fdfgdgdfg</td></tr>
    			<tr><td><input type="checkbox"/></td><td>2</td><td>678</td><td>fdfgdgdfg</td></tr>
    			<tr><td><input type="checkbox"/></td><td>2</td><td>678</td><td>fdfgdgdfg</td></tr>
    			<tr><td><input type="checkbox"/></td><td>2</td><td>678</td><td>fdfgdgdfg</td></tr>
                <tr><td><input type="checkbox"/></td><td>2</td><td>678</td><td>fdfgdgdfg</td></tr>
                <tr><td><input type="checkbox"/></td><td>2</td><td>678</td><td>fdfgdgdfg</td></tr>
                <tr><td><input type="checkbox"/></td><td>2</td><td>678</td><td>fdfgdgdfg</td></tr>
                <tr><td><input type="checkbox"/></td><td>2</td><td>678</td><td>fdfgdgdfg</td></tr>
                <tr><td><input type="checkbox"/></td><td>2</td><td>678</td><td>fdfgdgdfg</td></tr>
    		</tbody>
    		<tfoot>
    		</tfoot>
    	</table> 
       </div>
    <div id="choose"><input type="button" value="全选"/></div>
   </div>
    </body>
    </html>

。哈哈，慢慢的进步。

转载于:https://my.oschina.net/u/1000159/blog/144129