使用jQuery动态克隆表格，并且添加至div中（使用前需要引入jQuery）
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"> <script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var count = 0;
$("#btn").click(function(){
$("#tabDiv table").find(".gnname").text("1");//克隆前修改值
var $table = $("#tabDiv table").clone();
if(count >= 4){
return;
}
$("#div").append($table);
count++;
})
})
</script>
<style type="text/css">
.myTable{
width: 75px;
height: 50px;
float: left;
padding: 0px;
border-collapse: collapse;
}
</style>
</head>
<body>
<button id="btn">点击</button>
<div id="tabDiv" >
<table class="myTable" >
<tr>
<td rowspan="2" style="padding: 0px;border: 1px black solid;" align="center">
<font class="gnname" style="font-size: 9px;" title="">11</font>
</td>
<td style="padding: 0px;border: 1px black solid;">
<a class="value" style='color:green;font-size: 9px;cursor:pointer;' onclick="javascript:void(0);" title=''>22</a>
</td>
</tr>
<tr>
<td style="padding: 0px;border: 1px black solid;">
<font class="valueTwo" style='color:green;font-size: 9px;cursor:pointer;' title=''>33</font>
</td>
</tr>
</table>
</div> <br/><br/><br/> <div id="div" style="width: 150px; height: 100px; border: 1px; border-color: black;border-style: solid;"> </div> </body>
</html>
本脚本可以解决使用js动态生成表格的问题，省去了我们很多繁琐的拼接的过程；在web开发的过程中我们往往会遇到拼接html标签的问题，因此我在这里设计了这个小demo，希望对大家有帮助；当然习惯用easyUI的同学就没有必要再用我这种方法了；
使用jQuery动态克隆表格，并且添加至div中（使用前需要引入jQuery）的更多相关文章
- jQuery动态对表格Table进行添加或删除行以及修改列值操作
jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...
- 第84天：jQuery动态创建表格
jQuery动态创建表格 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- Ajax获取网页添加到div中
1:利用DOM获取该 div 的 ID,然后清空该DIV的内容(如果你需要接着里面的内容添加可不要清空):需要注意点是清空最好用“ empty() ”: 2: 把 async设成true ,否则又 ...
- jQuery——动态给表格添加序号
摘录自:http://www.cnblogs.com/picaso/archive/2012/10/08/2715564.html 很多时候遇到需要对表格动态操作,而且一般都会有表格的序号,但是有时候 ...
- jquery动态创建表格
1.代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- JQUERY动态绘制表格，实现动态添加一行，删除一行
HTML部分 <table style="width: 100%;" id="TABYESTERDAY11"></table> < ...
- 用JQuery动态为选中元素添加/删除类
在做一些tab页功能时,我们经常会见到如下样式: 即当选中一个元素时,在此元素下会添加相应的类,以示区别.今天就研究了一下如何用JQuery实现此效果. 1. HTML代码 <a id=&quo ...
- JQuery动态操作表格
新人,小白一枚,刚刚参加工作,所以会在这里记录一些遇到的问题. 最近要做的东西,是对一个表格动态的添加行,删除行,并且对表格中内容进行非空验证. <!DOCTYPE html> <h ...
- JS，jquery动态向已经存在的css文件中添加class样式
$("h1,h2,p").addClass("blue") $(".class")addClass("class_name&quo ...
随机推荐
- 利用linq的Take Skip方法解决 集合拆分的问题
public static void Main(string[] args) { List<string> list = new List<string>(); ; i < ...
- ubuntu下串口编程备忘
弄了一下串口,一个小问题多折腾了下,备忘.软件环境:zl@zhanglong:~$ cat /etc/lsb-release DISTRIB_ID=UbuntuDISTRIB_RELEASE=12.0 ...
- Linux显示inode的信息
Linux显示inode的信息 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ df -i 文件系统 Inode 已用(I) 可用(I) 已用(I)% 挂载点 ...
- Linux显示USB设备
Linux显示USB设备 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ lsusb -tv /: Bus 08.Port 1: Dev 1, Class=ro ...
- 数据库获取map数据后转化成json格式的数据
一,从数据库查出来的数据 两张表先各自左外连接,然后在相互左外连接查找省市县的数据(业务需求必须这样做,省市去的是第一张表,而市县取的是第二张表,两张表中间通过市的名字连接)见这个博文的最后一张图片 ...
- .Net学习计划
.Net培训 第一部分:.Net基础 .Net基础:数据类型.变量.运算符.分支结构.循环结构.方法.反编译器.递归.递归算法的非递归优化: 面向对象:异常.封装继承多态. ...
- R语言学习 第七篇：列表
列表(List)是R中最复杂的数据类型,一般来说,列表是数据对象的有序集合,但是,列表的各个元素(item)的数据类型可以不同,每个元素的长度可以不同,是R中最灵活的数据类型.列表项可以是列表类型,因 ...
- 创建元素节点createElement
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- (luogu P1383)高级打字机
高级打字机 题目链接 https://www.luogu.org/problemnew/show/P1383 背景 无聊中.. 随便在luogu上rand到了一道题 从此走上不归路 主席树是我暑假的时 ...
- [UVA 10529]Dumb Bones
题面在这里 题意 放\(n\)个相连的骨牌,每次放的时候有\(pl\)的概率往左倒,有\(pr\)的概率往右倒,骨牌倒的时候可能会打翻左边相邻或者右边相邻的骨牌,并引起连锁反应直到最后一个骨牌旁边没有 ...