jQuery实现隔行变色

用jQuery方法实现隔行变色和代码注释都在下面↓↓↓

1.html代码

 <form>
        <div>
            <label for="user">姓名</label>
            <input type="text" id="user">
        </div>
        <div>
            <label for="age">年龄</label>
            <input type="text" id="age">
        </div>
        <input type="button" value="添加" id="add">
        <div>
            <input type="button" value="开启偶数行变色" id="oddBtn">
            <input type="button" value="开启基数行变色" id="evenBtn">

            <input type="button" value="关闭变色" id="closeBtn">
        </div>
        <input type="number" placeholder="输入变色行数 回车确定" id="num">
    </form>

    <table border="1" style="width: 50vw;">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody id="tbody">
            <!-- <tr>
                <td>姓名</td>
                <td>年龄</td>
            </tr> -->
        </tbody>
    </table>

2.JavaScript代码

       var arr = [
            { "user": "wang", "age": 18 },
            { "user": "qian", "age": 80 }
        ]
        //------------渲染-----------------
        function show(arr) {
            var str = "";
            $.each(arr, function (i, v) {
                str += `
                <tr>
                    <td>${arr[i].user}</td>
                    <td>${arr[i].age}</td>
                </tr>
                `
            })
            $("#tbody").html(str)
            if (flag1 == "开") {
                $("#tbody tr:odd").css({
                    "background": "red"
                })
                flag1 = "开"
            } else if (flag2 == "开") {
                $("#tbody tr:even").css({
                    "background": "red"
                })
                flag2 = "开"
            } else {
                $("#tbody tr:odd").css({
                    "background": "white"
                })
                flag1 = "关"
                flag2 = "关"
            }
        }
        $(function () {
            show(arr)
        })
        //----------------添加------------------
        $("#add").click(function () {
            let user = $("#user").val()
            let age = $("#age").val();

            arr.push({ user, age })
            show(arr);
        })


        //-------------开启偶数行变色----------
        var flag1 = "关"
        var flag2 = "关"

        $("#oddBtn").click(function () {
            $("#tbody tr:odd").css({    //偶数变色，基数不变色
                "background": "red"
            })
            $("#tbody tr:even").css({
                "background": "white"
            })
        })

        //-------------开启基数行变色----------
        $("#evenBtn").click(function () {
            $("#tbody tr:even").css({
                "background": "red"     //基数变色，偶数不变色
            })
            $("#tbody tr:odd").css({
                "background": "white"
            })
        })

        //-------------关闭隔行变色----------
        $("#closeBtn").click(function () {
            $("#tbody tr:odd").css({     
                "background": "white"   //关闭所有tr隔行变色
            })
            $("#tbody tr:even").css({
                "background": "white"
            })
        })

        //-------------输入改变颜色----------------
        $("#num").keydown(function (event) {
            if (event.keyCode == 13) {
                var num = $("#num").val();
                if (num == "" || num == 0) {
                    // alert("请填写0以上")     //判断输入框不能为空
                    $("#tbody tr").css({
                        "background": "white"
                    })
                } else if (num > $("#tbody tr").length) {
                    alert("请输入正确行数")     //判断输入数值不高于tr的长度
                } else {
                    $("#tbody tr").eq(--num).css({
                        "background": "red"     //输入响应数值的tr变颜色，其他兄弟不变
                    }).siblings().css({
                        "background": "white"
                    })
                }
            }
        })