jQuery常见案例之表格删除、表格隔行换色、图片透明度变化

最新推荐文章于 2021-08-03 14:32:43 发布

小龙爷ღ

最新推荐文章于 2021-08-03 14:32:43 发布

阅读量217

点赞数

分类专栏： JQuery 文章标签： jQuery案例 jquery之删除操作 jquery之透明度操作图片透明度变化

本文链接：https://blog.csdn.net/qq_45086879/article/details/100131197

版权

JQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

今天讲3个比较简单的案例：表格删除任意一行、表格隔行换色、图片透明度变化

①表格删除案例：先看看提取出来的js部分

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    //清空按钮
    $("#btn").click(function () {
        $("#j_tb tr").remove();
    })
    //删除按钮
    $("#j_tb").find("a").click(function () {
        // alert("绑定成功");
        if (confirm("确定删除么？")) {
            $(this).closest("tr").remove();
        }
    })
</script>

结果展示：点击想要删除行的DELETE，进而删除该行；点击清空按钮，清除所有tbody部分的tr；

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格删除案例</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 410px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "Î¢ÈíÑÅºÚ";
            color: #fff;
        }

        td {
            font: 14px "Î¢ÈíÑÅºÚ";
        }

        td a.get {
            text-decoration: none;
        }

        a.del:hover {
            text-decoration: underline;
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }

        .btnAdd {
            width: 110px;
            height: 30px;
            font-size: 20px;
            font-weight: bold;
        }

        .form-item {
            height: 100%;
            position: relative;
            padding-left: 100px;
            padding-right: 20px;
            margin-bottom: 34px;
            line-height: 36px;
        }

        .form-item > .lb {
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 100px;
            text-align: right;
        }

        .form-item > .txt {
            width: 300px;
            height: 32px;
        }

        .mask {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.15;
            display: none;
        }

        .form-add {
            position: fixed;
            top: 30%;
            left: 50%;
            margin-left: -197px;
            padding-bottom: 20px;
            background: #fff;
            display: none;
        }

        .form-add-title {
            background-color: #f7f7f7;
            border-width: 1px 1px 0 1px;
            border-bottom: 0;
            margin-bottom: 15px;
            position: relative;
        }

        .form-add-title span {
            width: auto;
            height: 18px;
            font-size: 16px;
            font-family: ËÎÌå;
            font-weight: bold;
            color: rgb(102, 102, 102);
            text-indent: 12px;
            padding: 8px 0px 10px;
            margin-right: 10px;
            display: block;
            overflow: hidden;
            text-align: left;
        }

        .form-add-title div {
            width: 16px;
            height: 20px;
            position: absolute;
            right: 10px;
            top: 6px;
            font-size: 30px;
            line-height: 16px;
            cursor: pointer;
        }

        .form-submit {
            text-align: center;
        }

        .form-submit input {
            width: 170px;
            height: 32px;
        }
    </style>
</head>

<body>
<div class="wrap">
    <input type="button" value="清空内容" id="btn">
    <table>
        <thead>
        <tr>
            <th>课程名称</th>
            <th>所属学院</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <tr>
            <!-- <td><input type="checkbox"/></td> -->
            <td>JavaScript</td>
            <td>前端与移动开发学院</td>
            <td><a href="javascrip:;" class="get">DELETE</a></td>
        </tr>
        <tr>
            <!-- <td><input type="checkbox"/></td> -->
            <td>css</td>
            <td>前端与移动开发学院</td>
            <td><a href="javascrip:;" class="get">DELETE</a></td>
        </tr>
        <tr>
            <!-- <td><input type="checkbox"/></td> -->
            <td>html</td>
            <td>前端与移动开发学院</td>
            <td><a href="javascrip:;" class="get">DELETE</a></td>
        </tr>
        <tr>
            <!-- <td><input type="checkbox"/></td> -->
            <td>jQuery</td>
            <td>前端与移动开发学院</td>
            <td><a href="javascrip:;" class="get">DELETE</a></td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    //清空按钮
    $("#btn").click(function () {
        $("#j_tb tr").remove();
    })
    //删除按钮
    $("#j_tb").find("a").click(function () {
        // alert("绑定成功");
        if (confirm("确定删除么？")) {
            $(this).closest("tr").remove();
        }
    })
</script>

②表格隔行换色：实际操作css样式

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $(function () {
        $("#data tbody tr:odd").css("background-color","#ccccff");
    })
</script>

结果展示：

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格隔行换色</title>
<style>
    div, span, p {
        width: 140px;
        height: 140px;
        margin: 5px;
        background: #aaa;
        border: #000 1px solid;
        float: left;
        font-size: 17px;
        font-family: Verdana;
    }

    div.mini {
        width: 55px;
        height: 55px;
        background-color: #aaa;
        font-size: 12px;
    }

    div.hide {
        display: none;
    }

    #data {
        width: 600px;
    }

    #data, td, th {
        border-collapse: collapse;
        border: 1px solid #aaaaaa;
    }

    th, td {
        height: 28px;
    }

    #data thead {
        background-color: #333399;
        color: #ffffff;
    }

    .odd {
        background-color: #ccccff;
    }
</style>
</head>
<body>
<table id="data">
    <thead>
    <tr>
        <th>姓名</th>
        <th>工资</th>
        <th>入职时间</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Tom</td>
        <td>$3500</td>
        <td>2010-10-25</td>
        <td><a href="javascript:void(0)">删除</a></td>
    </tr>
    <tr>
        <td>Mary</td>
        <td>$3400</td>
        <td>2010-12-1</td>
        <td><a href="javascript:void(0)">删除</a></td>
    </tr>
    <tr>
        <td>King</td>
        <td>$5900</td>
        <td>2009-08-17</td>
        <td><a href="javascript:void(0)">删除</a></td>
    </tr>
    <tr>
        <td>Scott</td>
        <td>$3800</td>
        <td>2012-11-17</td>
        <td><a href="javascript:void(0)">删除</a></td>
    </tr>
    <tr>
        <td>Smith</td>
        <td>$3100</td>
        <td>2014-01-27</td>
        <td><a href="javascript:void(0)">删除</a></td>
    </tr>
    <tr>
        <td>Allen</td>
        <td>$3700</td>
        <td>2011-12-05</td>
        <td><a href="javascript:void(0)">删除</a></td>
    </tr>
    </tbody>
</table>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $(function () {
        $("#data tbody tr:odd").css("background-color","#ccccff");
    })
</script>
</body>
</html>

③.透明度变换：操作css样式之opacity

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $(function () {
        $(".wrap li")
            .mouseenter(function () {
                $(this).css("opacity", 0.5);
            })
            .mouseleave(function () {
                $(this).css("opacity",1);
            })
    })
</script>

结果展示：鼠标移动到哪个图片上则这个图片透明度降低，鼠标移开则恢复

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>透明度变化</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        body {
            background: #000;
        }

        .wrap {
            margin: 100px auto 0;
            width: 630px;
            height: 394px;
            padding: 10px 0 0 10px;
            background: #000;
            overflow: hidden;
            border: 1px solid #fff;
        }

        .wrap li {
            float: left;
            margin: 0 10px 10px 0;
        }

        .wrap img {
            display: block;
            border: 0;
        }
    </style>
</head>
<body>
<div class="wrap">
    <ul>
        <li><a href="#"><img src="images/01.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/02.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/03.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/04.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/05.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/06.jpg" alt=""/></a></li>
    </ul>
</div>
</body>
</html>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $(function () {
        $(".wrap li")
            .mouseenter(function () {
                $(this).css("opacity", 0.5);
            })
            .mouseleave(function () {
                $(this).css("opacity",1);
            })
    })
</script>