jQuery列表動態增加和刪除

郭崩崩發表於2020-11-05
jQuery

HTML程式碼

<input type="button" value="新增" class="insert">
<table cellspacing="0px" class="a">
    <thead>
    <th><input type="checkbox"></th>
    <th>分類的ID</th>
    <th>分類的名稱</th>
    <th>分類的描述</th>
    <th>操作</th>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>1</td>
        <td>手機數碼</td>
        <td>手機數碼</td>
        <td><a href="#">修改</a>&nbsp;<a href="#" class="del">刪除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>2</td>
        <td>電腦辦公</td>
        <td>電腦辦公</td>
        <td><a href="#">修改</a>&nbsp;<a href="#" class="del">刪除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>3</td>
        <td>菸酒糖茶</td>
        <td>菸酒糖茶</td>
        <td><a href="#">修改</a>&nbsp;<a href="#" class="del">刪除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>4</td>
        <td>鞋靴箱包</td>
        <td>鞋靴箱包</td>
        <td><a href="#">修改</a>&nbsp;<a href="#" class="del">刪除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>5</td>
        <td>汽車用品</td>
        <td>汽車用品</td>
        <td><a href="#">修改</a>&nbsp;<a href="#" class="del">刪除</a></td>
    </tr>
    </tbody>
</table>
<div class="box">
    分類的ID：<input type="text" class="num"><br>
    分類的名稱：<input type="text" class="name"><br>
    分類的描述：<input type="text" class="des"><br>
    <input type="button" value="新增" class="add">
    <input type="button" value="取消" class="cancle">
</div>

CSS樣式

<style>
        table, th, tr, td {
            border: 1px solid;
        }

        a {
            color: crimson;
        }

        tr {
            height: 40px;
            text-align: center;
        }

        table {
            width: 600px;
        }
        div{
            background-color: aqua;
            display: none;
            text-align: center;
            width: 300px;
            float: left;
        }
    </style>

script程式碼

<script>
        $(function () {
            //新增  彈出表單
            $(".insert").click(function(){
                $(".box").show();
            });
            //取消  收回表單
            $(".cancle").click(function (){
                $(".box").hide();
            });
            //新增顏色
            $("tr:odd").css("background-color", "yellow");
            ///全選事件
            $("thead th:first").append("<span id ='show'></span>")
            $("thead input:checkbox").click(function () {
                if ($(this).prop("checked")) {
                    // 全選
                    $("tbody input:checkbox").prop("checked", true);
                    $("#show").replaceWith("<span id = 'show'>取消全選</span>");
                } else {
                    // 取消全選
                    $("tbody input:checkbox").prop("checked", false);
                    $("#show").replaceWith("<span id = 'show'>全選</span>");
                }
            });

            $(".add").click(function (){
                //獲取表單資訊
                var num = $(".num").val();
                var name = $(".name").val();
                var des = $(".des").val();
                //用變數接收需要新增到table中的內容
                var x = $("<tr><td><input type=\"checkbox\"></td><td>" + num + "</td><td>" + name + "</td><td>" + des + "</td> <td><a href='#' >修改</a><a href='#' > 刪除</a></td></tr>");
                //將變數x新增到表格中
                $(".a").append(x);
                //新增顏色
                $("tr:odd").css("background-color", "yellow");
            });

            $("tbody").on("click", "td a:last-child", function () {
                if (confirm("是否刪除？")) {
                    //去除執行顏色的樣式
                    $("tr:odd").css("background-color", "");
                    //刪除某一行
                    $(this).parent().parent().remove();
                    //重新新增樣式
                    $("tr:odd").css("background-color", "yellow");
                }
            });
        });
    </script>

相關文章