jquery新增一个团队 并支持自删

 

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>数组团队管理</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .item {
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #ccc;
        }

        .delete-button {
            margin-left: 10px;
            color: red;
            cursor: pointer;
        }

        .table-container {
            margin-bottom: 20px;
            border: 1px solid #ccc;
            padding: 10px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }

        th,
        td {
            border: 1px solid #000;
            padding: 8px;
            text-align: center;
        }

        .delete-button {
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <button id="add">添加对象</button>
    <div id="container"></div>

    <script>
        $(document).ready(function () {
            let a = []; // 定义数组 a

            // 点击添加对象按钮
            $("#add").click(function () {
                const newObj = { name: "团队", value: "", child: [] };
                a.push(newObj);
                renderItems(); // 重新渲染
            });

            // 渲染函数
            function renderItems() {
                $("#container").empty(); // 清空容器
                a.forEach((item, index) => {
                    const itemDiv = $(`
                        <div class="table-container" >
                            <h3>表格 ${index + 1}</h3>
                            <table>
                                <thead>
                                    <tr>
                                        <th>序号</th>
                                        <th>内容</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>示例内容</td>
                                    </tr>
                                </tbody>
                            </table>
                            <button class="delete-button" data-index="${index}">删除表格</button>
                        </div>
                    `);
                    $("#container").append(itemDiv);
                });
            }

            // 删除对象
            $("#container").on("click", ".delete-button", function () {
                const index = $(this).data("index");
                a.splice(index, 1); // 从数组中删除
                renderItems(); // 重新渲染
            });
        });
    </script>
</body>

</html>

　　

posted @ 2025-05-06 16:13  玉文  阅读(22)  评论(0)    收藏  举报