使用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 ...
随机推荐
- tomcat证书配置
第一步:为服务器生成证书 1.进入%JAVA_HOME%/bin目录 2.使用keytool为Tomcat生成证书,假定目标机器的域名是"localhost",keystore文件 ...
- HighCharts之2D数值带有百分数的面积图
HighCharts之2D数值带有百分数的面积图 1.HighCharts之2D数值带有百分数的面积图源码 AreaPercentage.html: <!DOCTYPE html> < ...
- Flex中的DataGrid报错（一）
1.错误描述 此行的多个标记: -holeNum -1105: 赋值的目标必须是引用值. 2.错误原因 detailWindow.holeNum.toString() = &q ...
- 泛型集合、datatable常用数据类型转换Json帮助类
泛型集合.datatable常用数据类型转换Json帮助类 using System; using System.Data; using System.Configuration; using Sys ...
- hdu5751 Eades
今天热身考到FFT,完全忘光了,模板敲错了... 晚上温习下以前的题目 这题就是从最大值每次分割现在的区间,这样递归的区间最大值会更小,对于每种最大值都是卷积做 #include<bits/st ...
- 浅谈Javascript中的Label语句
如: begin: for (var i = 0; i < 10 ; i++ ){ alert(i); } 举一个比较典型的例子,看完后即明白 Label 的应用:(未添加 Label) var ...
- java中outputStream与inputStream的相互转换
package com.boco.test; import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; im ...
- 对于多线程下Servlet以及Session的一些理解
今天,小伙伴突然问到了Servlet是不是线程安全的问题.脑子当时一卡壳,只想到了单实例多线程.这里做一些总结. Servlet体系是建立在Java多线程的基础之上的,它的生命周期是由Tomcat来维 ...
- 【SPOJ】Substrings（后缀自动机）
[SPOJ]Substrings(后缀自动机) 题面 Vjudge 题意:给定一个长度为\(len\)的串,求出长度为1~len的子串中,出现最多的出现了多少次 题解 出现次数很好处理,就是\(rig ...
- [HNOI2013]消毒
题目大意: 网址:https://www.luogu.org/problemnew/show/3231 大意:a×b×c的三维空间里有a×b×c个点(x,y,z),其中有些点需要被消除. 消除的方法为 ...