<!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. jmeter压力测试笔记- HTTP协议

    一.目标 使用jmeter进行HTTP接口压力测试: 命令行方式运行,方便在linux环境运行: 二.面临的问题 支持多环境测试(开发.测试.生产环境) 支持用户数据.线程数.循环次数等配置在运行时自 ...

  2. C/C++使用MySQL

    一直找不到关于C/C++连接Mysql数据库的详细api书籍和网站,刷了下网页,找到一篇Linux 下C/C++连接数据库的博客,留着以后自己用. 首先需要编译.安装MySQL,安装完成后,将MySQ ...

  3. ssh (Spring , Struts2 , Hibernate)框架的配置使用

    思维导图(基本配置) 1. 需要引入的包 2 .spring-config.xml 的配置 <!-- 链接数据库 外部配置文件扫入 --> <context:property-ove ...

  4. 2.3 PCI桥与PCI设备的配置空间

    PCI设备都有独立的配置空间,HOST主桥通过配置读写总线事务访问这段空间.PCI总线规定了三种类型的PCI配置空间,分别是PCI Agent设备使用的配置空间,PCI桥使用的配置空间和Cardbus ...

  5. Eclipse部署Java Web项目到Tomcat出错

    1.今天,我打开Eclipse,准备将一个Java Web项目部署到Tomcat中, 结果弹出提示错误窗口,具体如下: (1)出错详情 Could not publish server configu ...

  6. VTK显示.vtk格式文件

    void ReadandShowVTKFile () { vtkSmartPointer<vtkRenderer > aRenderer = vtkSmartPointer<vtkR ...

  7. 基于 OS X Mavericks 系统

    基于 OS X Mavericks 系统远景论坛黑苹果区新手引导 常见疑难解答 以及必要知识普及帖 请善用论坛搜索功能 认真仔细地阅读置顶帖里的教程以及注意事项 前言:之前建立10.9区求助规范帖时, ...

  8. 促进客户转化，提高客单价！酷客多小程序发布版本V1.0.9！

    商户和企业主的又一次福音!酷客多小程序新零售o2o商城系统酷爱用户,为了追求极致的用户体验,没日没夜地沉浸于新功能的开发,经过一番努力,新功能终于上线啦! 此次版本迭代,在原有功能基础上做了大幅提升, ...

  9. Python机器学习：5.6 使用核PCA进行非线性映射

    许多机器学习算法都有一个假设:输入数据要是线性可分的.感知机算法必须针对完全线性可分数据才能收敛.考虑到噪音,Adalien.逻辑斯蒂回归和SVM并不会要求数据完全线性可分. 但是现实生活中有大量的非 ...

  10. [BZOJ1085] [SCOI2005] 骑士精神 (A*)

    Description 在一个5×5的棋盘上有12个白色的骑士和12个黑色的骑士, 且有一个空位.在任何时候一个骑士都能按照骑士的走法(它可以走到和它横坐标相差为1,纵坐标相差为2或者横坐标相差为2, ...