h5表格隔行换色

最新推荐文章于 2025-03-18 12:46:20 发布

biggrand

最新推荐文章于 2025-03-18 12:46:20 发布

阅读量3.5k

点赞数 2

文章标签：隔行换色高亮显示删除

本文链接：https://blog.youkuaiyun.com/biggrand/article/details/78492639

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        *{
            margin: 0 auto;
        }   

    </style>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script>            
        $(function(){
            //高亮显示
            $("tr").mouseenter(function(){//鼠标移上其他模糊
                $(this).css("opacity",1).siblings().css("opacity",0.4);
            });
            //给table添加离开的事件
            $("div").mouseleave(function(){
                $(this).children("table").eq(0).children("tbody").children("tr").css("opacity",1);

            });
            //隔行变色
            $("tbody tr:odd").css("background-color","red");//odd是奇数行    为红色
            $("tbody tr:even").css("background-color","yellowgreen");//even是偶数行  
            //点击删除   删除该行
            $("button").click(function(){
                $(this).parent().parent().remove();//找到父类是td,然后找到父类是tr然后移除该行
            });
        });

    </script>
</head>
<body>
    <div>
    <table style="width: 400px; " border="1" id="tab">
        <thead>
            <tr>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张一</td>
                <td>19</td>
                <td>男</td>
                <td><button>删除</button></td>
            </tr>
            <tr>
                <td>张二</td>
                <td>20</td>
                <td>男</td>
                <td><button>删除</button></td>
            </tr>
            <tr>
                <td>张三</td>
                <td>21</td>
                <td>女</td>
                <td><button>删除</button></td>
            </tr>
        </tbody>
    </table>
    </div>
</body>