如何用插件实现隔行变色

最新推荐文章于 2022-09-21 09:01:03 发布
最新推荐文章于 2022-09-21 09:01:03 发布
阅读量94 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42161401/article/details/82493667
版权

《js代码例子》

;(function($){
    $.fn.table = function(options){
        var defaults = {
            "odd": "red",
            "even":"blue"
        }
        
        var options = $.extend(defaults,options);
        this.each(function(){                
            var _this = $(this)
            _this.find("tr:odd").css({
                background:options.odd
            })
            _this.find("tr:even").css({
                background:options.even
            })
        })
        return this        
    }
})(jQuery)
 

《html代码例子》

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
        <script type="text/javascript" src="js/center1.2.js"></script>
        <style type="text/css">
            table {
                table-layout: fixed;
                empty-cells: show;
                border-collapse: collapse;
                margin: 0 auto;
                font-size: 30px;
                
            }            
            .table {
                border: 1px solid #cad9ea;
                color: #666;
            }
            .table td{
                height: 40px;
                width: 100px;
                border: 1px solid #cad9ea;
                text-align: center;
                color: ghostwhite;
            }
            
        </style>
    </head>

    <body>
        <table class="table">
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>2</td>
                <td>2</td>
                <td>2</td>
                <td>2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>3</td>
                <td>3</td>
                <td>3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>4</td>
                <td>4</td>
                <td>4</td>
            </tr>
            <tr>
                <td>5</td>
                <td>5</td>
                <td>5</td>
                <td>5</td>
            </tr>
            <tr>
                <td>6</td>
                <td>6</td>
                <td>6</td>
                <td>6</td>
            </tr>
        </table>
        <script type="text/javascript">
            $(".table").table()
        </script>
    </body>

</html>

海忆
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery实现表格隔行变色
LHH201016的博客
08-22 1853
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>变色表格</title> <script src="jquery-3.6.0.js"></script> </head> <body> <table b...
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
10-22
在这个例子中，我们将深入探讨如何使用jQuery创建一个插件，以实现表格隔行变色以及鼠标滑过时的高亮显示效果。 首先，我们来看一下基本的HTML结构，这里包含了一个简单的表格，用于展示插件的效果： ```html ...
表格隔行变色插件
jingtian678的博客
04-21 445
html文件 隔行变色   table { margin: 100px auto; border: 1px solid black; text-align: center; width: 500px; border-collapse:collapse; } td,th{border: 1px solid black;line-height: 30px
实现 列表隔行变色 案例
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
01-25 982
创建列表隔行变色项目 新建项目空目录，并运行npm init -y命令，初始化包管理配置文件package.json 新建src源代码目录 新建src->index.html首页 初始化首页基本的结构 运行npm install jquery -s命令，安装jQuery 通过模块化的形式，实现列表隔行变色效果 在项目中安装和配置webpack 运行npm install webpack webpack-cli -D命令，安装webpack相关的包 在项目目录中，创建名为webpack.confi
html表单隔行变色,JSP表格隔行变色
weixin_28890941的博客
06-17 1011
css代码如下：.odd{background-color:#CCC}.even{background-color:#999}.hover{background-color:#FF9;}html代...--.datalist{border:1pxsolid#0058a3;/*表格边框*/font-family:Aria...插件分俩种：·类级别组件开发： ...
jquery表格隔行变色插件
weixin_30457551的博客
10-21 127
//插件代码;(function($){ $.fn.extend({ "alterBgColor":function(options){ options = $.extend({ "odd":"odd",//偶数行的class "even":"even",//奇数行clas...
[js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件
Eric_sun8868的博客
11-03 124
隔行变色功能，不用js，直接用css伪类就可以做，这个实例可以作为js插件开发很好的入门级实例。本文实现的隔行变色包括以下功能： 1，支持2种常用结构共存( div元素 和 表格类型 ) 2，一个页面...
jQuery插件--表格隔行变色
weixin_34273479的博客
06-21 132
插件分俩种：·类级别组件开发： ---即给JQuery命名空间下添加新的全局函数，也称静态方法。形式如下：jQuery.myPlugin=function(){//dosomething};例如：$.ajax(options); $.type();·对象级别组件开发 ---挂在JQuery原型下的方法，通...
Vue 列表：隔行变色+无缝滚动
蒋小姐的博客
12-10 1488
1.列表效果： 数据定时刷新+无缝滚动+隔行变色+数据大于5条才执行滚动 2.注意 注意：报错（变量未定义） 原因：数据未加载好就去渲染页面了 方法：获取到数据之后再去渲染页面（执行滚动） 3.vue <template> <div id="com" v-if="listdata"> <ul :class="animate?'list':''"> <li v-for="(item,index) in li.
VUE框架实现表格隔行换色
weixin_43892549的博客
09-21 398
VUE框架实现表格隔行换色效果
webpack基础使用,实现隔行变色效果
08-04
总结来说，这个项目是一个基础的 Webpack 使用示例，展示了如何配置 Webpack 以及使用 jQuery 实现隔行变色效果。通过学习这个项目，你可以更好地理解 Webpack 的工作原理，以及如何利用它来管理和构建前端项目。
jQuery实现隔行变色的方法分析(对比原生JS)
10-21
本文将深入探讨如何使用jQuery实现隔行变色，并与原生JavaScript进行对比。 首先，我们来看原生JavaScript实现隔行变色的方法。通过`document.getElementsByTagName`方法，我们可以获取到页面上的所有表格元素...
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
08-31
通过结合使用这些类，我们可以轻松地实现表格的隔行变色、hover 变色以及自适应滚动条，从而创建出更美观、更易用的 Web 表格。这个方法适用于那些希望快速开发和维护高质量 Web 应用的开发者，特别是对于那些不熟悉...
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
01-19
js代码： css代码： 代码如下: tr.alt td { background:#ecf6fc; /*这行将给所有的tr加上背景色*/ } tr.over td { background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/ }
Hardware Engineering
最新发布
07-06
Hardware Engineering Resources This document provides a curated list of resources for learning about hardware engineering, including books, online courses, websites, professional organizations, and online communities. Whether you're a beginner or looking to deepen your knowledge, these resources cover a wide range of topics in hardware engineering.
MongoDB的Linux安装、基本操作、可视化、实验源码与报告文档.docx
07-05
安装MongoDB： 下载MongoDB的最新稳定版本，可以通过官方网站或者命令行下载。 将下载的压缩文件解压至指定目录，如 /usr/local/mongodb。 创建数据存储目录，如 /data/db，确保对该目录有读写权限。 设置环境变量：在 ~/.bashrc 或者 ~/.zshrc 文件中添加以下内容： export PATH=/usr/local/mongodb/bin:$PATH 执行命令使配置生效： source ~/.bashrc 启动MongoDB，执行以下命令： mongod 基本操作： 启动MongoDB之后，可以通过命令行连接到MongoDB实例： mongo 创建数据库： use mydatabase 创建集合并插入文档： db.mycollection.insertOne({ name: "John", age: 30 }) 查询文档： db.mycollection.find() 可视化工具： 可以使用MongoDB官方提供的可视化工具Compass，也可以使用第三方工具如Robo3T或者Studio 3T来管理Mong
宏基笔记本主板Acer Chromebook C730 Quanta ZHQ v1.0维修图纸
07-05
宏基笔记本主板Acer Chromebook C730 Quanta ZHQ v1.0维修图纸
EY-零售和商业银行业务中的生成式人工智能（英文）(1).pdf
07-05
EY-零售和商业银行业务中的生成式人工智能（英文）(1).pdf
nodejs不使用插件实现sso server
02-06
Node.js 中实现 SSO 服务器的方法有很多，下面是一种不使用插件的方法： 1. 使用 Node.js 开发 web 应用程序，并使用相应的 web 框架，如 Express。 2. 在应用程序中实现登录功能。这可以通过使用会话和 cookies 来...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值