隔行变色

最新推荐文章于 2021-11-14 17:20:59 发布

潇潇馨愿

最新推荐文章于 2021-11-14 17:20:59 发布

阅读量1k

点赞数 2

本文链接：https://blog.csdn.net/weixin_45976745/article/details/108087841

版权

表格隔行变色

方法1：利用纯css改变：odd 奇数行 even : 偶数行
在这里插入图片描述

这样的方法虽然可以实现效果，但是也仅仅是实现效果，没有复用性，且操作性不强，基本上没啥用

方法2：利用原生js实现
在这里插入图片描述

这个方法是原生js 使用for循环遍历li标签，然后利用if-else对li标签取偶数(或者奇数)，设置为相应的颜色，这个和上面的方法原理差不多，都是利用奇偶性，但是比上面一个的复用性高

方法3：利用JQuery实现,导入一个jQuery的包，然后使用这种相对于前两种，用的多一点
在这里插入图片描述

隔行变色常用案例：
完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    姓名:<input type="text" id="name" />
    <br>
    年龄:<input type="text" id="age" />
    <br>
    生日:<input type="text" id="birthday" />
    <br>
    <button id="add">添加</button>
    <br>
    <table border="1px" id="t">
        <thead>
            <tr class="tou">
                <th>姓名</th>
                <th>年龄</th>
                <th>生日</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</body>

<script src="./jquery-1.12.4.js"></script>
<script>
    $("#add").click(function () {
        //获取数据 名字 年龄   生日
        var name = $("#name").val();
        var age = $("#age").val();
        var birthday = $("#birthday").val();
        //添加到表格里面
        var tr =  `
                <tr class="tou">
                    <td>${name}</td>
                    <td>${age}</td>
                    <td>${birthday}</td>
                </tr>`
        $("tbody").append(tr);
        // 清空输入框
        $("input").val("")
        change();
    });
    
    //将奇数行变成灰色，偶数行白色
    function change() {
        //普通方法
        //获取所有的行
        var trs = $("tr"); //元素选择器，可以选择一类标签，结果是个数组
        //遍历，元素
        for (var i = 0; i < trs.length; i++) {
            //判断，如果是奇数行，变灰色
            //如果是偶数行，不变色
            if (i % 2 == 0) {
            } else {
                //改变样式  jQuery
                var tr = trs[i];
                tr.style.background = "skyblue"; //通过原生的js，改变背景色
            }
        }
    }
    change();
</script>
</html>

在这里插入图片描述

这个添加数据存入table中，隔行变色，是动态的，·使用了原声和jq，还有模板字符串，上面是添加之前和之后的效果图

潇潇馨愿

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
隔行变色

表格隔行变色方法1：利用纯css改变：odd 奇数行 even : 偶数行这样的方法虽然可以实现效果，但是也仅仅是实现效果，没有复用性，且操作性不强，基本上没啥用方法2：利用原生js实现这个方法是原生js 使用for循环遍历li标签，然后利用if-else对li标签取偶数(或者奇数)，设置为相应的颜色，这个和上面的方法原理差不多，都是利用奇偶性，但是比上面一个的复用性高方法3：利用JQuery实现,导入一个jQuery的包，然后使用这种相对于前两种，用的多一点隔行变色常用案例：
复制链接

扫一扫