原生js实现隔行变色

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


<html>
    <head>
        <meta charset="utf-8" />
        <title>隔行变色title>
        
        <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>

        
        <script type="text/javascript">
            //添加
            $("#add").click(function() {

                //获取数据 名字 年龄   生日
                var name = $("#name").val();
                var age = $("#age").val();
                var birthday = $("#birthday").val();
                //添加到表格里面
                var tr = "" + name + "" + age + "" + birthday + "";
                $("#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实现隔行变色_第1张图片

你可能感兴趣的:(前端h5,css3,javascript...)