JS：隔行变色的表格

红嘴-蓝鹊

于 2022-02-03 00:40:14 发布

阅读量438

点赞数

分类专栏： JS基础文章标签： javascript elementui 前端

本文链接：https://blog.csdn.net/weixin_48475463/article/details/122772367

版权

JS基础专栏收录该内容

28 篇文章 1 订阅

订阅专栏

一、表格制作

<body>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>序号</th><th>姓名</th><th>年龄</th><th>性别</th><th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- 例如 -->
            <!-- 
            <tr>
                <td>1</td><td>李沁</td><td>18</td><td>女</td><td>删除</td>
            </tr> -->
        </tbody>
    </table>
    <script>
        var arr = [
            {
                name:"李沁",
                age:"18",
                gender:"女"
            },
            {
                name:"胡莎",
                age:"18",
                gender:"女"
            },
            {
                name:"迪丽热巴",
                age:"18",
                gender:"女"
            },
            {
                name:"王鸥",
                age:"18",
                gender:"女"
            },
            {
                name:"唐嫣",
                age:"18",
                gender:"女"
            },
            {
                name:"李丽娟",
                age:"18",
                gender:"女"
            },
        ];

        //找出tbody 
        var tbody = document.querySelector("tbody");

        //预定义tbody的HTML结构字符串
        var htmlStr = "";

        //遍历数组arr  .forEach  给数组元素做指定操作
        arr.forEach(
            function(starObj,index){
                //给每个明星 动态造一个 tr
                var tr = "<tr>";
                
                //加入序号td
                tr += `<td>${index+1}</td>`;

                //遍历明星属性  每个属性造一个 td
                for(var star in starObj){
                    var td = `<td>${starObj[star]}</td>`;
                    tr += td;
                }

                //加入删除操作td
                tr += "<td>删除</td>";

                //将造出来的tr/td拼接到htmlStr
                tr += "</tr>";
                htmlStr += tr;
            }
        )

        //最后给tbody设置innerHTML
        tbody.innerHTML = htmlStr;
    </script>
</body>

二、隔行变色

<body>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>序号</th><th>姓名</th><th>年龄</th><th>性别</th><th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- 例如 -->
            <!-- 
            <tr>
                <td>1</td><td>李沁</td><td>18</td><td>女</td><td>删除</td>
            </tr> -->
        </tbody>
    </table>
    <script>
        var arr = [
            {
                name:"李沁",
                age:"18",
                gender:"女"
            },
            {
                name:"胡莎",
                age:"18",
                gender:"女"
            },
            {
                name:"迪丽热巴",
                age:"18",
                gender:"女"
            },
            {
                name:"王鸥",
                age:"18",
                gender:"女"
            },
            {
                name:"唐嫣",
                age:"18",
                gender:"女"
            },
            {
                name:"李丽娟",
                age:"18",
                gender:"女"
            },
        ];

        //找出tbody 
        var tbody = document.querySelector("tbody");

        //预定义tbody的HTML结构字符串
        var htmlStr = "";

        //遍历数组arr  .forEach  给数组元素做指定操作
        arr.forEach(
            function(starObj,index){
                //给每个明星 动态造一个 tr
                // 如果数据的序号为奇数 则当前行加入行内样式 定义其背景色为粉色
                var tr = `<tr ${index%2===1?"style='background-color:#ccc'":""}>`;
                
                //加入序号td
                tr += `<td>${index+1}</td>`;

                //遍历明星属性  每个属性造一个 td
                for(var star in starObj){
                    var td = `<td>${starObj[star]}</td>`;
                    tr += td;
                }

                //加入删除操作td
                tr += "<td>删除</td>";

                //将造出来的tr/td拼接到htmlStr
                tr += "</tr>";
                htmlStr += tr;
            }
        )

        //最后给tbody设置innerHTML
        tbody.innerHTML = htmlStr;
    </script>
</body>

三、添加删除键

<body>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- 例如 -->
            <!-- 
            <tr>
                <td>1</td><td>李沁</td><td>18</td><td>女</td><td>删除</td>
            </tr> -->
        </tbody>
    </table>
    <script>
        var arr = [
            {
                name: "李沁",
                age: "18",
                gender: "女"
            },
            {
                name: "胡莎",
                age: "18",
                gender: "女"
            },
            {
                name: "迪丽热巴",
                age: "18",
                gender: "女"
            },
            {
                name: "王鸥",
                age: "18",
                gender: "女"
            },
            {
                name: "唐嫣",
                age: "18",
                gender: "女"
            },
            {
                name: "李丽娟",
                age: "18",
                gender: "女"
            },
        ];

        //找出tbody 
        var tbody = document.querySelector("tbody");

        function renderPage() {
            //清空tbody的内容
            tbody.innerHTML = "";

            //预定义tbody的HTML结构字符串
            var htmlStr = "";

            //遍历数组arr  .forEach  给数组元素做指定操作
            arr.forEach(
                function (starObj, index) {
                    //给每个明星 动态造一个 tr
                    // 如果数据的序号为奇数 则当前行加入行内样式 定义其背景色为粉色
                    var tr = `<tr ${index % 2 === 1 ? "style='background-color:#ccc'" : ""}>`;

                    //加入序号td
                    tr += `<td>${index + 1}</td>`;

                    //遍历明星属性  每个属性造一个 td
                    for (var star in starObj) {
                        var td = `<td>${starObj[star]}</td>`;
                        tr += td;
                    }

                    //加入删除操作td
                    tr += "<td class='btnDel'>删除</td>";

                    //将造出来的tr/td拼接到htmlStr
                    tr += "</tr>";
                    htmlStr += tr;
                }
            )

            //最后给tbody设置innerHTML
            tbody.innerHTML = htmlStr;
        }



        // 绑定事件监听
        function bindEvent() {
            // 删除按钮监听
            // 找出所有class为btnDel的元素
            var btns = document.getElementsByClassName("btnDel");

            // 绑定click监听
            for (let i = 0; i < btns.length; i++) {
                var index = i;
                btns[i].onclick = function () {
                    // 删除对应的数据
                    arr.splice(index, 1);

                    // 重新渲染页面
                    renderPage()

                    // 重新绑定事件监听
                    bindEvent()
                }
            }
        }

        renderPage()
        bindEvent()
    </script>
</body>

注：有BUG

红嘴-蓝鹊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS：隔行变色的表格

一、表格制作<body> <table cellspacing="0"> <thead> <tr> <th>序号</th><th>姓名</th><th>年龄</th><th>性别</th><th>操作</th> </tr>
复制链接

扫一扫

专栏目录