关闭

jQuery中的clone妙用

422人阅读 评论(0) 收藏 举报

clone:官方的解释是克隆匹配的DOM元素并且选中这些克隆的副本。如果想克隆DOM元素绑定的所有事件,可采用clone(true),JQ1.5版本以上默认为false。

具体怎么用?

先举例一个小例子:

<p><a href="#">第一个<a/>123456</p>

我们想吧a标签克隆一个放在p标签内部末尾:

$("a").clone().appendTo("p")

结果:<p><a href="#">第一个</a>123456<a href="#">第一个</a></p>

下面进入正题:

jQuery中的clone妙用

显示结果如下:

jQuery中的clone妙用

现在我们想通过jq向这表格中添加数据,这时候克隆就是一个很好的办法了。

第一步:

创建数据源:

var data = [

{id:1,name:"张三",sex:"男",age:"16",score:80},

{id:1,name:"李四",sex:"男",age:"22",score:70},

{id:1,name:"赵五",sex:"男",age:"25",score:90}

];

第二步:通过each遍历数据源

$.each(data,function(i,o){

})

其中i表示索引值,o表示对应的数据源数组里面的元素

第三步:clone方法的运用

var $myTable = $(".myTable");

$.each(data,function(i,o){

var $clone = $(".template").clone().show().removeClass("template");

$clone.find("first:td").text(o.id).next().text(o.name).next().text(o.sex).next().text(o.age).next().text(o.score);

})

首先将最开始设置的那个模板进行克隆并且显示,移除出类名。然后依次找到它下面的第一个td,第二个td……内容进行赋值。

第四步:添加到DOM树上

var $myTable = $(".myTable");

$.each(data,function(i,o){

var $clone = $(".template").clone().show().removeClass("template");

$clone.find("td:first").text(o.id).next().text(o.name).next().

text(o.sex).next().text(o.age).next().text(o.score);

/*添加到表格中*/

$clone.appendTo(".myTable");

})

最终显示效果:

jQuery中的clone妙用

本文为头条号作者发布,不代表今日头条立场。

0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:467733次
    • 积分:7219
    • 等级:
    • 排名:第3077名
    • 原创:25篇
    • 转载:1631篇
    • 译文:0篇
    • 评论:82条
    最新评论