jQuery实现表格隔行变色,以及全选按钮,全不选按钮,反选按钮
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .oddTr {
                background-color: white;
            }
            
            .evenTr {
                background-color: #e1e1e1;
            }
            
            .curTr {
                background-color: yellow;
            }
        </style>
        <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function() {
                for(i = 1; i <= 10; i++) {
                    $("tbody").append("<tr><td><input type='checkbox' value='"+i+"'/></td><td>" + i + "</td><td>" + i * i + "</td></tr>")
                }
                //隔行变色
                $("tbody tr:even").addClass("evenTr");
                $("tbody tr:odd").addClass("oddTr");
                
                //滑动变色
                $("tbody tr").each(function() {
                    $(this).hover(function() {
                        $(this).addClass("curTr");
                    })
                    $(this).mouseout(function() {
                        $(this).removeClass("curTr")
                    })
                    $(this).dblclick(function() {
                        alert((this).find("td:eq(1)").text())
                    })
                })
                
                //全选
                $("#selestAll").click(function(){
                    $("input[type='checkbox']").prop("checked","checked")
                })
                
                //全不选
                $("#selestNone").click(function(){
                    $("input[type='checkbox']").prop("checked","")
                })
                
                //反选
                $("#selestOpposite").click(function(){
                    $("input[type='checkbox']").each(function(){
                        $(this).prop("checked",!$(this).prop("checked"))
                    })
                })
                
                
              
                
                
            })
            
            
            
        </script>
    </head>

    <body>
        <table border="" cellspacing="" cellpadding="">
            <tbody>
                <thead><tr>
                <th>Header</th>
                <th>Data</th>
                <th>Data</th>
            </tr></thead>
            </tbody>
    
        </table>
        
        <button id="selestAll">全选</button>
        <button id="selestNone">全不选</button >
        <button id="selestOpposite">反选</button>
     
    </body>

</html>
阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

jQuery实现表格隔行变色,以及全选按钮,全不选按钮,反选按钮

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭