原生js实现隔行变色

最新推荐文章于 2024-04-14 08:44:26 发布

原创最新推荐文章于 2024-04-14 08:44:26 发布 · 851 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

Android开发专栏收录该内容

52 篇文章

订阅专栏

本文介绍了一个简单的原生JavaScript实现的隔行变色效果。通过点击按钮添加数据到表格中，并自动为表格的每一行设置不同的背景颜色。同时实现了行内删除功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注：这个代码只是演示了用原生js实现隔行变色的效果，没有其他的效果，有些瑕疵

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>隔行变色</title>
        <!--
            引入外部js
        -->
        <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            .tou {
                background: red;
            }
        </style>
    </head>

    <body>
        <!--
            界面
        -->
        姓名:<input type="text" id="name" />年龄:<input type="text" id="age" />生日:<input type="text" id="birthday" />
        <input type="button" id="add" value="添加" />
        <br>
        <table border="1px" id="t">
            <tr class="tou">
                <th>姓名</th>
                <th>年龄</th>
                <th>生日</th>
                <th>删除</th>
            </tr>

        </table>

        <!--
            将js代码写在所有标签后面
        -->
        <script type="text/javascript">
            //添加
            $("#add").click(function() {

                //获取数据 名字 年龄   生日
                var name = $("#name").val();
                var age = $("#age").val();
                var birthday = $("#birthday").val();
                //添加到表格里面
                var tr = "<tr><td>" + name + "</td><td>" + age + "</td><td>" + birthday + "</td><td><input type='button' value ='删除' onclick ='dele(this)'/></td></tr>";
                $("#t").append(tr);
                change();
            });
            //删除
            function dele(t) {
                /*
                 * 原生js实现删除
                 * var tr = t.parentNode.parentNode;
                tr.remove();*/
                /**
                 * 使用jQuery实现删除
                 */
                var tr = $(t).parent().parent();
                tr.remove();
                change();
                //如果表格就剩下最后一行，就将整个表格消失
                var ta = $("tr");
                if (ta.length == 1) {
                    $("#t").empty();
                }
            }
            //将奇数行变成灰色，偶数行白色

            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 = "#666"; //通过原生的js，改变背景色
                    }
                }
            }
            change();
        </script>
    </body>

</html>

原生js实现隔行变色

效果图