jQuery表格新增行

jQuery表格新增行

开发工具与关键技术:VS 、jQuery
作者:张赵敏
撰写时间:2019/1/18
使用jQuery需要引入jQuery的插件,这次我用的是jquery-3.2.1.min.js。调用它内部封装好的一方法实现一个简单表格新增行和内容

首先,利用HTML布局好简单的表格、表头行
来,我们一起看下布局代码以及布局效果
在这里插入图片描述
在截图中我们看到,有三个按钮,我们可以通过按钮触发相应的方法函数得到不同的结果,
新增行:是无限的新增行和内容。可控制次数:根据你设置的次数条件而定,我设置了增加三就不再增加。单次执行:此事件触发一次之后便失去新增行和内容的功能。

执行方法的内容,见截图
在这里插入图片描述
此页面编写中的的关键代码的分享,如下截图:
要注意喔,红色部分的位置和条件喔,位置和条件不一样会有不一样的效果喔

比如:声明的x变量是全局变量还是局部变量会对后面的结果造成不同的影响
在这里插入图片描述
本次用的jQuery的事件:click() append() unbind() one()
click()触发、或将函数绑定到指定元素的 click 事件
append()向匹配元素集合中的每个元素结尾插入由参数指定的内容。
unbind()移除被选元素的事件处理程序或者当事件发生时终止指定函数的运行
one()向匹配元素添加事件处理器。每个元素只能触发一次该处理器。

猜你喜欢

转载自blog.csdn.net/weixin_44519188/article/details/86536567
今日推荐