jQuery实现隔行变色

2021年09月15日 阅读数:2
这篇文章主要向大家介绍jQuery实现隔行变色,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

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

一,html页面javascript

  <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代码css

 <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>

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