<!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是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

使用jQuery动态克隆表格，并且添加至div中（使用前需要引入jQuery）的更多相关文章

  1. jQuery动态对表格Table进行添加或删除行以及修改列值操作

    jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...

  2. 第84天：jQuery动态创建表格

    jQuery动态创建表格 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  3. Ajax获取网页添加到div中

    1:利用DOM获取该 div 的 ID,然后清空该DIV的内容(如果你需要接着里面的内容添加可不要清空):需要注意点是清空最好用“ empty()  ”: 2: 把  async设成true ,否则又 ...

  4. jQuery——动态给表格添加序号

    摘录自:http://www.cnblogs.com/picaso/archive/2012/10/08/2715564.html 很多时候遇到需要对表格动态操作,而且一般都会有表格的序号,但是有时候 ...

  5. jquery动态创建表格

    1.代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  6. JQUERY动态绘制表格，实现动态添加一行，删除一行

    HTML部分 <table style="width: 100%;" id="TABYESTERDAY11"></table> < ...

  7. 用JQuery动态为选中元素添加/删除类

    在做一些tab页功能时,我们经常会见到如下样式: 即当选中一个元素时,在此元素下会添加相应的类,以示区别.今天就研究了一下如何用JQuery实现此效果. 1. HTML代码 <a id=&quo ...

  8. JQuery动态操作表格

    新人,小白一枚,刚刚参加工作,所以会在这里记录一些遇到的问题. 最近要做的东西,是对一个表格动态的添加行,删除行,并且对表格中内容进行非空验证. <!DOCTYPE html> <h ...

  9. JS，jquery动态向已经存在的css文件中添加class样式

    $("h1,h2,p").addClass("blue") $(".class")addClass("class_name&quo ...

随机推荐

  1. MinGW下简单编译FFmpeg

    2009.03.21补充:ffmpeg-0.5正式发布,地址为:[url]http://www.ffmpeg.org/releases/ffmpeg-0.5.tar.bz2[/url].修改了第7步, ...

  2. Netty未来展望

    作为<Netty权威指南(第2版)>的结尾章节,和读者朋友们一起展望下Netty的未来. 1应用范围 随着大数据.互联网和云计算的发展,传统的垂直架构逐渐将被分布式.弹性伸缩的新架构替代. ...

  3. Java获取某年某月的第一天

    Java获取某年某月的第一天 1.设计源码 FisrtDayOfMonth.java: /** * @Title:FisrtDayOfMonth.java * @Package:com.you.fre ...

  4. C#中各种计时器 Stopwatch、TimeSpan

    1.使用 Stopwatch 类 (System.Diagnostics.Stopwatch)Stopwatch 实例可以测量一个时间间隔的运行时间,也可以测量多个时间间隔的总运行时间.在典型的 St ...

  5. eclipse和android studio的目录结构分析

    不管你喜不喜欢,愿不愿意,自从Google宣布正式停止对于eclipse的支持,要开发android的APP,你都得乖乖的用android studio(以下简称AS)了,不过也不是什么悲伤的故事,对 ...

  6. IOS开发之XCode学习008：UIViewController基础

    此文学习来源为:http://study.163.com/course/introduction/1002858003.htm 红色框选部分用A代替,AppDelegate类在程序框架启动时,如果在i ...

  7. SpringBoot集成Shiro并用MongoDB做Session存储

    之前项目鉴权一直使用的Shiro,那是在Spring MVC里面使用的比较多,而且都是用XML来配置,用Shiro来做权限控制相对比较简单而且成熟,而且我一直都把Shiro的session放在mong ...

  8. 【BZOJ4805】欧拉函数求和（杜教筛）

    [BZOJ4805]欧拉函数求和(杜教筛) 题面 BZOJ 题解 好久没写过了 正好看见了顺手切一下 令\[S(n)=\sum_{i=1}^n\varphi(i)\] 设存在的某个积性函数\(g(x) ...

  9. [Luogu3345][ZJOI2015]幻想乡战略游戏

    Luogu 题意: 动态维护带权重心. sol 这是一道写起来很舒服的动态点分治.(不像某些毒瘤题) 我们考虑,如果你选择的补给点不是当前的带权重心,那么带权重心就在补给点的一个子树中(你把补给点当做 ...

  10. [BZOJ1609] [Usaco2008 Feb] Eating Together麻烦的聚餐 (dp)

    Description 为了避免餐厅过分拥挤,FJ要求奶牛们分3批就餐.每天晚饭前,奶牛们都会在餐厅前排队入内,按FJ的设想所有第3批就餐的奶牛排在队尾,队伍的前端由设定为第1批就餐的奶牛占据,中间的 ...