【小河今学 | JavaScript+jQuery】JQ插件开发练习之数据表格插件

已于 2022-08-12 11:31:53 修改
阅读量297 收藏
点赞数
分类专栏： 小河今学 文章标签： javascript jquery 前端
于 2022-08-11 22:05:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LB_laber/article/details/126293500
版权

8.11 今天作业是要求练习JQ插件开发的书写过程，具体要求如下：

需求： 制作一个数据表格插件。

功能：

  1. 完成表格数据的动态显示；
  2. 定义插件的默认参数；
  3. 实现表格的自定义事件。

接下来讲一下我练习过程中的具体思路。

一、完成表格数据的动态显示

首先给页面一个表格的表头，具体代码和效果如下：

	<div class="container">
        <table border="1px">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>电话</th>
                    <th>地址</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>

		* {
            margin: 0;
            padding: 0;
        }
        
        .container {
            width: 600px;
            margin: 100px auto;
            text-align: center;
        }


        table {
            width: 600px;
            border-collapse: collapse;
        }

在这里插入图片描述
接着将我们需要动态渲染到页面上的数据写一个json文件，这里我命名为table.json

[
    {
        "sno": "0001",
        "sname": "张三",
        "tel": "1232142132",
        "address": "132412312312"
    },
    {
        "sno": "0002",
        "sname": "张三",
        "tel": "1232142132",
        "address": "132412312312"
    },
    {
        "sno": "0003",
        "sname": "张三",
        "tel": "1232142132",
        "address": "132412312312"
    },
    {
        "sno": "0004",
        "sname": "张三",
        "tel": "1232142132",
        "address": "132412312312"
    },
    {
        "sno": "0005",
        "sname": "张三",
        "tel": "1232142132",
        "address": "132412312312"
    }
]

然后引入jq文件和自己写的jq插件，这里我的jq插件命名为jquery.table.js

<script src="/jquery.js"></script>
<script src="/jquery.table.js"></script>

接下来就是写jq插件的内容，首先把基础的格式写上，这里的showDate是我定义的方法名。

;(function($){
	var that;
	$.fn.showDate = function(option){
		that = this;

		return that;
	}
)(jQuery);

所以在原html文件中，获取 tbody 这个dom，调用showDate方法，并且拿到table.json

<script>
	$('tbody').showDate({url:'/table.json'});
</script>

这个时候我们在showDate这个方法里console.log(option); 可以在控制台看到输出的是一个url
在这里插入图片描述
那么这里我们为什么要这个url呢，是为了使用iframe动态渲染数据到前端页面。
如果我们直接在原html中使用iframe，得到的页面效果如下：

<tbody>
	<!-- 用iframe来获取远程数据 -->
	<iframe src="/table.json" frameborder="0">		
	</iframe>
</tbody>

在这里插入图片描述

可以看到我们确实是拿到了table.json的数据，只是它没有按照我们想要的样式渲染。
接着我们将这个iframe框架写到jquery.table.js中

;(function($){
    var that;
    $.fn.showDate = function(option) {
        that = this;    
        
        // 创建一个iframe，用来获取远程数据
        var iframe = $('<iframe style="display: none;" src="' + option.url + '"></iframe>').appendTo('tbody')

        return that;
    };
})(jQuery);

这里的option.url就是我们先前写在html里的{url: ‘/table.json’}
接着由于iframe是通过异步加载数据的，必须等加载完以后才能获取到数据，所以我们用on绑定一个load事件，即当dom加载完成后才会执行代码

//样式代码
iframe.on('load',function(){
}

//完整代码
;(function($){
    var that;
    $.fn.showDate = function(option) {
        that = this;    
        
        // 创建一个iframe，用来获取远程数据
        var iframe = $('<iframe style="display: none;" src="' + option.url + '"></iframe>').appendTo('tbody')
        // iframe中的文件是异步加载，所以用on绑定load事件，当dom加载完成后才会执行代码
		iframe.on('load',function(){
		}
        return that;
    };
})(jQuery);

接着我们console.log(this)，看一下我们拿到的是什么

iframe.on('load',function(){
	console.log(this);
}

在这里插入图片描述
接下来我们就是要获取这个body里的数据，可以看到他是在this底下的#document底下的body里，即$(this.contentDocument.body).text()，同时我们定义一个变量来接收它。

iframe.on('load',function(){
	var data = $(this.contentDocument.body).text()
}

接着我们console.log(data);看一下拿到的是什么
在这里插入图片描述

可以看到我们拿到的数据它是JSON格式的字符串，我们要将它转换成js对象，这里就要用到JSON.parse()

iframe.on('load',function(){
	var data = JSON.parse($(this.contentDocument.body).text());
}

然后我们再console.log(data);看一下拿到的是什么
在这里插入图片描述
可以看到这个就是我们想要的数据格式。接着我们要定义一个方法把我们拿到的这个数据渲染到前端页面上。这个地方很好理解，就是用一个for循环每一行的数据，然后用append加到页面上（这里的that即this即$(‘tbody’)）。

		// 设置一个方法，将得到的data数据渲染到前端页面上
        function dataHtml(data){
            // 定义一个变量，用来存放前端页面的dom结构
            var txt = '';
            for(var i  in data){
                txt = '<tr><td>' + data[i].sno + '</td><td>' 
                + data[i].sname + '</td><td>' + data[i].tel + '</td><td>' 
                + data[i].address + '</td>' + '</tr>'
                that.append(txt)
            }
            
        }

定义完方法后不要忘记了调用它

;(function($){
    var that;
    $.fn.showDate = function(option) {
        that = this;    
        
        // 创建一个iframe，用来获取远程数据
        var iframe = $('<iframe style="display: none;" src="' + option.url + '"></iframe>').appendTo('tbody');
        // iframe中的文件是异步加载，所以用on绑定load事件，当dom加载完成后才会执行代码
        iframe.on('load',function(){
            // 获取到远程数据的内容
            var data = JSON.parse($(this.contentDocument.body).text());
            console.log(data);

            // 调用渲染方法
            dataHtml(data)
        })
        
        // 设置一个方法，将得到的data数据渲染到前端页面上
        function dataHtml(data){
            // 定义一个变量，用来存放前端页面的dom结构
            var txt = '';
            for(var i  in data){
                txt = '<tr><td>' + data[i].sno + '</td><td>' 
                + data[i].sname + '</td><td>' + data[i].tel + '</td><td>' 
                + data[i].address + '</td>' + '</tr>'
                that.append(txt)
            }
        }
        return that;
    };
})(jQuery);

在这里插入图片描述

二、定义插件的默认参数

思路也很简单，创建一个默认参数，将它与传入参数合并为一个变量即可。
具体代码如下，首先创建默认参数default.json

[
    {
        "sno": "01",
        "sname": "张三",
        "tel": "123132",
        "address": "x2312312"
    }
]

接着在我们的jq插件中定义一个变量来接收这个json的地址

		// 创建默认参数
        var def = {url: '/default.json'};

然后将这个默认参数的变量与传入参数的变量合并为一个变量，同时记得修改我们iframe中获取参数地址的变量名称。

		// 将默认参数和传入参数合并为一个对象
        var settings = $.extend({},def,option);
        // 创建一个iframe，用来获取远程数据
        var iframe = $('<iframe style="display: none;" src="' + settings.url + '"></iframe>').appendTo('tbody');

//完整代码
;(function($){
    var that;
    var event;
    $.fn.showDate = function(option) {
        that = this;    
        
        // 创建默认参数
        var def = {url: '/default.json'};
        // 将默认参数和传入参数合并为一个对象
        var settings = $.extend({},def,option);
        // 创建一个iframe，用来获取远程数据
        var iframe = $('<iframe style="display: none;" src="' + settings.url + '"></iframe>').appendTo('tbody');
        // iframe中的文件是异步加载，所以用on绑定load事件，当dom加载完成后才会执行代码
        iframe.on('load',function(){
            // 获取到远程数据的内容
            var data = JSON.parse($(this.contentDocument.body).text());
            // 调用渲染方法
            dataHtml(data)
        })
        
        // 设置一个方法，将得到的data数据渲染到前端页面上
        function dataHtml(data){
            // 定义一个变量，用来存放前端页面的dom结构
            var txt = '';
            for(var i  in data){
                txt = '<tr><td>' + data[i].sno + '</td><td>' 
                + data[i].sname + '</td><td>' + data[i].tel + '</td><td>' 
                + data[i].address + '</td>' + '</tr>'
                that.append(txt)
            }
        }
		return that;
    };
})(jQuery);

接着在html页面，我们不传参调用一下该方法试试

<script>
	$('tbody').showDate()
</script>

在这里插入图片描述
可以看到这里就是拿到了我们的默认参数值。

三、实现表格的自定义事件。

表格自定义事件如click事件、mouseover事件等，这里我们简单的写两个时间，分别为mouseover和mouseout事件。当鼠标移入时改变行的样式，当鼠标移出时恢复原样式。

<script>
    $('tbody').showDate({
        url: '/table.json',
        mouseover: function(){
            $(this).css({
                'background':'#999',
                'color':'#fff'
            })
        },
        mouseout: function(){
            $(this).css({
                'background':'#fff',
                'color':'#000'
            })
        }
    });
</script>

接着我们在jquery.table.js里console.log(option)看一下
在这里插入图片描述
可以看到我们拿到了mouseout、mouseover和url，这里url我们用不到，所以进行一个删除，将删除url后的option赋值给一个新的变量。

delete option.url;
event = option;

接着定义一个方法，对event进行循环，这里我们用到$.each()进行循环，$.each( object, callback )
object Object类型 指定需要遍历的对象或数组。
callback Function类型 指定的用于循环执行的函数。

		function addEvent(){
            $.each(event,function(i,v){
            	// 父元素DOM.on(事件名,子元素,事件处理函数)  -- 事件委派（委托）
                $(that).on(i,'tr',v)
            })
        }

接着我们在所有数据动态加入到页面上后，调用这个方法，完整代码如下

;(function($){
    var that;
    var event;
    $.fn.showDate = function(option) {
        that = this;    
        
        // 创建默认参数
        var def = {url: '/default.json'};
        // 将默认参数和传入参数合并为一个对象
        var settings = $.extend({},def,option);
        // 创建一个iframe，用来获取远程数据
        var iframe = $('<iframe style="display: none;" src="' + settings.url + '"></iframe>').appendTo('tbody');
        // iframe中的文件是异步加载，所以用on绑定load事件，当dom加载完成后才会执行代码
        iframe.on('load',function(){
            // 获取到远程数据的内容
            var data = JSON.parse($(this.contentDocument.body).text());
            

            // 调用渲染方法
            dataHtml(data)
        })
        
        // 设置一个方法，将得到的data数据渲染到前端页面上
        function dataHtml(data){
            // 定义一个变量，用来存放前端页面的dom结构
            var txt = '';
            for(var i  in data){
                txt = '<tr><td>' + data[i].sno + '</td><td>' 
                + data[i].sname + '</td><td>' + data[i].tel + '</td><td>' 
                + data[i].address + '</td>' + '</tr>'
                that.append(txt)
            }
            addEvent();
        }
        console.log(option)
        delete option.url;
        event = option;
        function addEvent(){
            $.each(event,function(i,v){
                $(that).on(i,'tr',v)
            })
        }
        return that;
    };
})(jQuery);

以上就我的练习过程

LB_laber
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery案例
Su3253067688的博客
10-24 1106
3.页面元素的综合操作。2.图书分类下拉列表。
dashboard_javascript_dashboard模板_源码
10-02
管理者模板 適用於前端開發模組套用 包含表格 圖形化報表等等
js和jQuery练习
妖月的博客
08-02 341
html 中 title 属性和 alt 属性的区别? alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息，它会直接输出在原本加载图片的地方， 而title属性是在你鼠标悬停在该图片上时显示一个小提示，鼠标离开就没有了，有点类似jQuery的hover 请说出几个常用的块级元素和行内元素. div、p等最常见的块级元素 span、a等最常见的行内元素 块级元素...
jQuery练习案例：实现用户登录验证和图书列表添加删除（+原生）
欢迎来到长风沛雨的博客
11-20 3391
练一个普通的JS案例...
JQuery表格Table操作-获取表格数据/向表格填充数据
qq_47189438的博客
06-30 1647
使用JQuery获取表格数据/向表格填充数据
四川小众美食APP的开发与设计.pdf
08-26
【四川小众美食APP开发背景】 随着全球化的推进，中国美食逐渐受到国际友人的喜爱，尤其是四川美食，因其独特的麻辣风味备受推崇。然而，四川美食的多样性并未完全展现，许多小众美食尚未被广大外国人所熟知。为响应...
三重J简单的小河与信息「Triple J Simple Stream With Info」-crx插件
03-12
简单的快捷方式在后台随意播放澳大利亚的Triple J广播 从chrome轻松流式传输Triple J广播。 不再在后台跟踪选项卡/窗口！ 双击以查看当前的曲目信息。 非官方粉丝创建了应用。 支持语言:English
教科二年级下快活的小河PPT学习教案.pptx
10-08
教科二年级下快活的小河PPT学习教案.pptx
教科二年级下册快活的小河PPT学习教案.pptx
10-08
教科二年级下册快活的小河PPT学习教案.pptx
使用 jQuery UI 创建 resizable，draggable 仪表盘
抱朴守拙
02-06 776
网络上有非常多的开源 Dashboard 解决方案，如：15 种构建 Dashboard 的开源解决方案 还有一些 grid 框架，可用于定制自己的 Dashboard，例如 gridster，react-grid-layout 等等。 但是这些方案都有个共同的问题，就是太复杂，有一定的学习和系统集成的成本，不适合演示性的小工具面板开发。如果你只想花几个小时的时间，来实现一个能够拖拽和缩放的面板，...
用jQuery写一个表格
yesir_mao的博客
06-18 7378
需求：用jQuery动态生成一个表格 说明：jQuery版本为：jquery-1.11.3.js 步骤如下： 1.先创建一个表头： </tbody> </table> # FirstName LastName ...
jquery的表格组件-dataTables的基本使用
最新发布
Artisan_w
10-13 4156
jQuery DataTables 是一个功能丰富且灵活的 jQuery 插件，用于创建交互式的数据表格，提供搜索、排序、分页、筛选等功能，以便更好地展示和管理数据。通过使用 jQuery DataTables，你可以轻松地将数据集转换为易于浏览和交互的表格，而无需手动编写大量的 HTML 和 JavaScript 代码。它具有广泛的配置选项和扩展，使你能够适应不同的数据源和显示需求。
Jquery 表格制作 编辑、删除 、添加功能
清风且从容，何需念君安。
05-26 1300
【代码】Jquery 表格制作 编辑、删除 、添加功能。
jQuery的几个小练习
paradoxzl的博客
07-14 624
学习jQuery过程中的小练习
jquery 学习笔记及小练习
qq_45309319的博客
04-07 668
jQuery 1.简介 JQuery是js函数库 本质就是js库 jQuery总共有三个版本 1版本兼容性最好 2 版本3版本轻量化 jquery 核心函数 <!-- 1. 作为一般函数调用: $(param) 1). 参数为函数 : 当DOM加载完成后，执行此回调函数 2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象 3). 参数为DOM对象: 将dom对象封装成jQuery对象 4). 参数为html标签字符串 (用得少): 创建标签对象并
网页前端知识汇总（七）—— 巧用JQuery+Ajax实时显示统计网站文章数据量
XYCMS博客家园
12-03 650
数据统计在网站后端和前端还是比较常见的，常见统计的数据有访问量，阅读量，下载量等，今天我主要讲后端应用比较多的，就是某个栏目的数据总数量。 有的人可能说了，这个讲没有意思，就是用PHP程序或者ASP程序都可以直接count出数据，没有必要用jQuery，但是我说的不是数据管理模板里面的，是总盘显示的，是实时显示，避免有数据更新时显示盘看不到情况，下面看效果 我程序统计的是某个栏目文章数据总数量第一步，我们先简单写个HTML 第二部前端就算是写好了，下面就是利用jQuery+Ajax技术写实时获取数据的函
案例：jQuery动态创建表格（完整代码）
m0_65085680的博客
10-11 1514
案例：jQuery动态创建表格（完整代码）
10道JQuery的小练习
qq_40411946的博客
07-03 5802
期 末 复 习 的 10 道 jQuery 小练习 1.使用jquery修改div元素的背景色(随意颜色)&lt;body&gt; &lt;div&gt; &lt;/div&gt; &lt;script&gt; /* 1.使用jquery修改div元素的背景色(随意颜色) * * */ $('div').css('background',"...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值