<!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. 关于HC04超声波模块测距的思考（51版）

    之前写过一篇HC04的使用文章,当时是使用stm32来实现的,原文链接. 后来又多次使用51来驱动这个模块,有时候有测距需要,使用了几次,总是感觉我上次那个程序不是很好, 所以这次对它进行了改进.虽然 ...

  2. 经典案例之MouseJack

    引言:在昨天的文章<无线键鼠监听与劫持>中,我们提到今天会向您介绍一个无线键鼠的监听与劫持的经典案例,<MouseJack>:MouseJack能利用无线鼠标和键盘存在的一些问 ...

  3. 【memcache】windos下 memcache更改默认的端口和最大使用内存

    1>用内网ip的方式提供web应用服务器调用,不允许直接通过外网调用,如将memcache服务器放在192.168.1.55的服务器上 2>修改端口,如改为11200 3>分配内存, ...

  4. Axure使用心得分享

    因为之前很少涉及到原型设计,所以对这个原型设计工具也不太熟悉,第一次使用走了不少的弯路,在这里把自己在使用过程中的心得跟大家分享一下,希望能够对大家有所帮助. 一. 元素的选择 我觉得这是Axure原 ...

  5. 版本控制工具--svn和git的使用（一） -----版本控制的好处以及分类

    版本控制工具 版本控制VCS(Version Control Systems)是一种记录一个或若干文件内容变化,以便将来查阅特定版本修订情况的系统.这个系统可以自动帮我们备份文件的每一次更改,并且可以 ...

  6. 异常-----Template user.ftl not found

    freemarker 1.错误描述 java.io.FileNotFoundException: Template user.ftl not found. at freemarker.template ...

  7. GridView中使用 jQuery DatePicker （UpdatePanel）

    1.无UpdatePanel   1.代码 <script> $(function () { $('.myDatePickerClass').datepicker({ dateFormat ...

  8. yyb要填的各种总结的坑

    已经写好啦的 莫比乌斯反演 杜教筛 动态点分治 斜率优化 Splay 莫队 凸包 旋转卡壳 Manacher算法 Trie树 AC自动机 高斯消元 KMP算法 SA后缀数组 SAM后缀自动机 回文树 ...

  9. 【BZOJ3670】动物园（KMP算法）

    [BZOJ3670]动物园(KMP算法) 题面 BZOJ 题解 神TM阅读理解题 看完题目之后 想暴力: 搞个倍增数组来跳\(next\) 每次暴跳\(next\) 复杂度\(O(Tnlogn)\) ...

  10. CF813E Army Creation

    题意 \(n\)个数\(a[i] ,q\)次询问,\(n,a[i],q<=10^5\)每次问\([l,r]\)内最多可以选多少个数,满足同一个数的出现次数不超过\(k\) 强制在线 Sol 处理 ...