jQuery实现隔行变色

简介：这里我主要用到了jQuery的两个方法odd(偶数),even(奇数)

一，html页面

  <form>
        <div>
            <label>姓名</label>
            <input type="text" id="name">
        </div>
        <div>
            <label>年龄</label>
            <input type="text" id="age">
        </div>
        <div>
            <input type="button" value="添加" id="add">
        </div>
    </form>
    <div>
        <button id="open">开启隔行变色</button>
        <button id="even">开启奇数隔行变色</button>
        <button id="close">关闭隔行变色</button>
    </div>
    <table border="1" cellspacing="0" cellpadding="0">
        <tr>
            <thead>
                <th>姓名</th>
                <th>年龄</th>
            </thead>
        </tr>
        <tbody id="tbody">
        </tbody>
    </table>

二，js代码

 <script>
        var arr = [{
      "name": "qian", "age": 19 }, {
      "name": "li", "age": 19 }];
        
        var flag = "关";/*  偶数的变量    */
        var flag2 = "关";/*  奇数的变量    */
        /*  添加数据列表点击事件    */
        $("#add").click(function () {
     
            var name = $("#name").val();
            var age = $("#age").val();
            arr.push({
      name, age });
            showTab(arr);
        })
        /*  默认加载渲染    */
        $(function () {
     
            showTab(arr);
        })
        /*  渲染方法    */
        function showTab(arr) {
     
            var str = "";
            $.each(arr, function (i, v) {
     
                str += `
            
                ${
       v.name}
                ${
       v.age}
            
              `
            })
            $("#tbody").html(str);
            /*  页面渲染对每个点击事件的变量赋值    */
            if (flag == "关") {
     
                $("#tbody>tr:odd").css({
      "background": "white" });
                flag = "关";
            } else {
     
                $("#tbody>tr:odd").css({
      "background": "red" });
                flag = "开";
            }
            if (flag2 == "关") {
      
                $("#tbody>tr:even").css({
      "background": "white" });
                flag2 = "关";
            } else {
     
                $("#tbody>tr:even").css({
      "background": "red" });
                flag2 = "开";
            }
        }
        /*  实现偶数行的点击事件    */
        $("#open").click(function () {
     
            $("#tbody>tr:odd").css({
      "background": "red" });
            $("#tbody>tr:even").css({
      "background": "white" });
            flag = "开";
            flag2 = "关";
        })
        /*  实现奇数行的点击事件    */
        $("#even").click(function () {
     
            $("#tbody>tr:even").css({
      "background": "red" });
            $("#tbody>tr:odd").css({
      "background": "white" });
            flag = "关";
            flag2 = "开";
        })

        /*  关闭隔行变色的点击事件    */
        $("#close").click(function () {
     
            $("#tbody>tr").css({
      "background": "white" });
            flag = "关";
            flag2 = "关";
        })
    </script>

路过的铁子们给我点个赞