docker安装部署 Angular VMware 主从复制 mAPI checkbox mvvm concurrency bootstrap后台管理系统模板 angular视频 jquery解析json数据 python中sort函数 python当前日期 java正则表达式 java入门新手教程 java中class java连接mysql的jar包 shell脚本参数 网页游戏代码 修改tomcat端口 saminside 快捷精灵 big5 bbm注册 汽车配件查询软件 ps水平翻转快捷键 c语言幂函数 ps去白底 qq农场图标 骰子牛牛 vue动态路由 淘宝店铺会员 巫师3福利 括号符号大全 微博实名认证 黑客软件网 千兆网线做法 字符串截取 键盘怎么调灯光 ai软件是什么
当前位置: 首页 > 学习教程  > 编程语言

jQuery实现隔行变色效果

2021/1/13 19:45:12 文章标签: 测试文章如有侵权请发送至邮箱809451989@qq.com投诉后文章立即删除

简介&#xff1a;这里我主要用到了jQuery的两个方法odd(偶数),even(奇数) 一&#xff0c;html页面 <form><div><label>姓名</label><input type"text" id"name"></div><div><label>年龄</label>&l…

简介:这里我主要用到了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 += `
            <tr>
                <td>${v.name}</td>
                <td>${v.age}</td>
            </tr>
              `
            })
            $("#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>

路过的铁子们给我点个赞
在这里插入图片描述


本文链接: http://www.dtmao.cc/news_show_600177.shtml

附件下载

上一篇:C++ Qt

下一篇:mysql like多个值

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?