正文

08.01《jquery》——隔行换色jquery实现(代码片段)

justlive-tears  justlive-tears  2022-12-19  163

关键词：

这是HTML代码和jQuery的触发代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="tableChangeColor_byself.css"/>
        <script src="../jquery-3.2.1/jquery-3.2.1.js"></script>
        <script src="tableChangeColor_byself.js"></script>
        <script type="text/javascript">
            $(function()
                $("table").alterBgColor().find("th").css("color","red");
            );

        </script>
    </head>
    <body>
        <table id="table1">
            <thead>
                <tr>
                    <th> </th>
                    <th>姓名1</th>
                    <th>性别</th>
                    <th>暂住地</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" name="choice" value="" /></td>
                    <td>张三</td>
                    <td>男</td>
                    <td>新疆哈密</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="choice" value="" /></td>
                    <td>李四</td>
                    <td>女</td>
                    <td>江苏南京</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="choice" value="" checked=‘checked‘ /></td>
                    <td>王五</td>
                    <td>男</td>
                    <td>湖南长沙</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="choice" value="" /></td>
                    <td>赵六</td>
                    <td>男</td>
                    <td>浙江温州</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="choice" value="" /></td>
                    <td>冯七</td>
                    <td>男</td>
                    <td>浙江嘉兴</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="choice" value="" /></td>
                    <td>马八</td>
                    <td>男</td>
                    <td>浙江杭州</td>
                </tr>
            </tbody>
        </table>

    </body>
</html>

这是jQuery插件的代码：

;(function($) 
    $.fn.extend(
        //"隔行换色": function(options) 
        "alterBgColor": function(options) 
            //设置默认值
            options = $.extend(
                odd: "odd",
                /* 偶数行样式*/
                even: "even",
                /* 奇数行样式*/
                selected: "selected" /* 选中行样式*/
            , options);
            //$("选择器",上下文); //如果不传第二个参数 默认上下文是 document                 从当前文档中 寻找
            //this 在当前对象下 寻找  table 
            $("tbody>tr:odd", this).addClass(options.odd);
            $("tbody>tr:even", this).addClass(options.even);
            $(‘tbody>tr‘, this).click(function() 
                //判断当前是否选中
                var hasSelected = $(this).hasClass(options.selected);

                //如果选中，则移出selected类，否则就加上selected类
                $(this)[hasSelected ? "removeClass" : "addClass"](options.selected)
                    //查找内部的checkbox,设置对应的属性。
                    .find(‘:checkbox‘).prop(‘checked‘, !hasSelected); //2.1.4 需改成prop方法
            );
            // 如果单选框默认情况下是选择的，则高色.
            $(‘tbody>tr:has(:checked)‘, this).addClass(options.selected);
            return this; //返回this，使方法可链。
        

    );
)(jQuery);

这是其中的CSS样式代码：

table         border:0;border-collapse:collapse;
td     font:normal 12px/17px Arial;padding:2px;width:100px;
th             font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;
.even         background:#FFF38F;  /* 偶数行样式*/
.odd         background:#FFFFEE;  /* 奇数行样式*/
.selected         background:#FF6500;color:#fff;

代码的结果为：

技术分享图片

jquery案例一：实现表格隔行换色(代码片段)

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>使用JQ完成表格隔行换色</title><scriptsrc="js/jquery.min.js"></script><script>$(function()$("tbodytr:o 查看详情

07.30《jquery》——2.1隔行换色_简单的选择器练习(代码片段)

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><styletype="text/css"></style></head><scriptsrc="../jquery-3.2.1/jquery-3.2.1.js" 查看详情

使用jquery完成表格的隔行换色(代码片段)

使用JQuery完成表格的隔行换色Js相关技术获得所有的行? table.rows[]修改行的颜色? row.bgColor="red"? row.style.backgroundColor="black"? row.style.background="red"? "background-color:red"? "background:red"需求分析在我们... 查看详情

javascript知识jquery样式操作&案例：jquery隔行换色

💂个人主页: 爱吃豆的土豆🤟版权: 本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主💬如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦🏆人必有所执，方能有所成！... 查看详情

表格的隔行换色

jQuery代码： $(function(){ varitem=$("tr"); 查看详情

jqgrid设置隔行换色

有时，为美观效应，需要设置jqgrid隔行换色。jqgrid提供altRows属性来配置启动隔行换色：altRows:true,//隔行换色$("#filterGrid").jqGrid({altRows:true,//隔行换色data:newFilterArr,editurl:‘clientArray‘,styleUI:‘Bootstrap‘,datatype:"local",page:1,co 查看详情

javaweb04-html篇笔记

1.1案例二：表格隔行换色的案例：1.1.1需求：对数据的表格进行隔行换色的显示效果,使用JQuery完成该效果.1.1.2分析：1.1.2.1技术分析：【JQuery的选择器】基本过滤选择器：odd：even:【JQuery中添加和移除样式】如果样式没有事先定义... 查看详情

jquery选择器

###今日任务####使用JQuery完成页面定时弹出广告定时器:?setIntervalclearInterval?setTimeoutclearTimeout显示:img.style.display="block"隐藏:img.style.display="none"img对象?style属性:style对象####使用JQuery完成表格的隔行换色获得所有的行?table.rows[]修改行查看详情

每日一课：报表隔行换色

实现报表隔行换色的效果，既在backgroudcolor添加函数信息。函数如下：iif(RowNumber(Nothing)mod2=0,"Turquoise","White")具体步骤如下：第一步选中相关行；第二步在背景色中选择公式，然后写入：iif(RowNumber(Nothing)mod2=0,"Turquoise","White")即可... 查看详情

jq——选择器的应用（表格的隔行换色全选和全不选）(代码片段)

1、表格的隔行换色：（1）核心代码：<script>$(function()$("tbodytr:even").css("background-color","red");$("tbodytr:odd").css("background-color","yellowgreen"););</script>获取tbody中的元素，并对奇数行和偶数行分别设置不同的颜色。（2）效果展示... 查看详情

08-js中table隔行换色

JS中table隔行换色1<!DOCTYPEhtml>2<html>3<head>4<metacharset="UTF-8">5<title></title>6</head>7<body>8<tableid="tab1"border=""cellspacing=""cellpadding=""wi 查看详情

隔行换色

这是在直接在jsp页面中使用java代码<%//每页显示的新闻列表List<News>newsList=newsService.getPageNewsList(pageIndex,pageSize);inti=0;for(Newsnews:newsList){i++;}%><tr<%if(i%2!=0){%>class="admin-list-td-h2& 查看详情

隔行换色

1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title>Document</title>6<style>7*{margin:0;padding:0;}8li{9width:500px;10height:50px;11border:1px 查看详情

easyuitree隔行换色

$(‘#Tree‘).tree({onExpand:function(node){$("#Tree.tree-node").removeClass("tree-node-css");$("#Tree.tree-node:visible:odd").toggleClass("tree-node-css");},onCollapse:function(node){$("#Tree.tree-node" 查看详情

cxgrid隔行换色

新建一个cxStyleRepository，分别建立几种Styles,如cxgrid_odd,cxgrid_even,cxgrid_selection等，并设置好它们的背景色、字体属性等。在cxGridDBTableView中，有一个Styles属性，里面有Content，ContentEven，ContentOdd，Selection，这是cxGrid常用的四种样式。... 查看详情

element全局table 隔行换色

/* 用来设置当前页面element全局table 隔行换色*/.el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped.el-table__row--striped td background-color:#ebeef5; /*替换为你需要的颜色，觉得优先级不够查看详情

jquery简单学习(代码片段)

入门：1.在官网中下载jquery2.在html页面中引入,使用script标签对引入jquery3.在html页面中使用jquery使用:通过jquery实现隔行换色先引入：<scriptsrc="js/jquery-3.6.0.min.js"></script><script>$(function()/* 查看详情