jQuery中点击按钮创建表格

1、我们先说单个元素的创建，在一个div盒子里创建一个a标签，我们就需要先写入一个按钮和一个div盒子。如下图所示，要实现的功能就是点击按钮在盒子内创建一个表格。

2、我们想要的功能需要通过jQuery来实现，所以先引入一个jQuery的插件，然后写一个script标签来写jQuery代码块。

3、首先我们先写一个页面加载事件，在jQuery中的页面加载事件是一个$符号然后一个小括号，小括号里面写function。

4、我们创建表格首先就需要先创建一个存储表格数据的数组，注意不是在页面加载事件内创建的噢。

5、接下来就获取到按钮，然后添加点击事件。

6、首先我们先创建一个table标签然后使用var声明存储到变量名为table的里面然后再在后面使用appendTo添加到div里面去。

7、因为我们创建出来的表格是两列五行，所以我们这里需要使用到for循环来创建表格的行和列。

8、使用var声明一个变量名为dt，然后后面是arr[i]，也就是使用索引值来表示当前行。

9、创建tr然后加入到刚刚创建好的table中。

10、创建td1加入到tr中，因为分为两列所以就有td1和td2之分，td1存放name也就是网站名字，所以在添加td1的时候还要加上网站名字，网站名字可以用dt.name来表示。

11、创建td2和创建td1差不多，只是在添加td2还需要在td标签里面添加一个a标签然后添加网站地址，网站地址可以用dt.href来表示，另外还需要添加td.name在中间，不然怎么知道这个链接叫什么名字呢。

12、这样一个简单的添加表格就做好了，其他需要美化的效果就自行添加吧。

jQuery中点击按钮创建表格相关推荐

php点击按钮显示隐藏代码,jQuery中点击按钮实现显示与隐藏的方法
jQuery能够简单快捷的实现很多功能,因此在前端开发中被广泛使用,正在学习jQuery的小伙伴,你会用jQuery实现点击显示再次点击隐藏的效果吗(即jQuery二次点击隐藏)?这篇文章就和大家讲讲 ...
点击按钮创建一个表格点击按钮创建一个表格权限选择元素的value属性操作
点击按钮创建一个表格 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
多库共存包装集的问题点击按钮创建一个p 几个属性介绍 jQuery的插件
多库共存 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
jquery点击按钮显示和隐藏div
[转]jquery点击按钮显示和隐藏DIv 1 function changeDisplay() { 2 if ($("#btnShow").attr("value&qu ...
js中点击按钮时变色，松开后恢复原来的颜色
js中点击按钮时变色,松开后恢复原来的颜色 // class.active{background: #1AB394;}//js<script type="text/javascript ...
vue中点击按钮切换图片
vue中点击按钮切换图片直接附上代码,亲测有效  <template><div><div class="">< ...
jquery中点击事件click的写法
jquery中点击事件click的写法: <input type="button" "test1()" id="btn1" value ...
WebDriver中点击按钮、连接无效问题
WebDriver中点击按钮.连接无效问题之前在写一个测试用例的时候,就有发现点击提交按钮不起作用,今天又遇到点击链接也不起作用的情况.经过一些尝试,暂时已通过其他方式解决. 1. 软件 ...
点击按钮创建动态表格
目录涉及知识点成品展示一.效果展示二.代码展示 1.基础框架 2.CSS样式 3.JS代码总结涉及知识点创建元素document.createElement(" &quo ...
jquery中点击切换的实现
项目中经常会遇到一种情况,就是点击切换,比如点击按钮,div样式为1,再点击一下按钮,div样式为2,再点击一下按钮,div样式为1.需要自定义jQuery方法toggle. // toggle方法$ ...

jQuery中点击按钮创建表格

jQuery中点击按钮创建表格相关推荐

最新文章

热门文章