<!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. eclipse web and java ee development

    1.打开Eclipse ->help ->install new software 2.Work with:http://download.eclipse.org/releases/gan ...

  2. R用户的福音︱TensorFlow：TensorFlow的R接口

    ------------------------------------------------------------ Matt︱R语言调用深度学习架构系列引文 R语言︱H2o深度学习的一些R语言实 ...

  3. FusionCharts ScrollColumn2D图

    FusionCharts ScrollColumn2D图 1.JSP页面 ScrollColumn2D.jsp: <%@ page language="java" conte ...

  4. hi3531的hifb显示1080p60Hz

    #include <stdio.h> #include <stdlib.h> #include <string.h> #include <unistd.h&g ...

  5. Caused by: java.lang.ClassNotFoundException: org.objectweb.asm.commons.EmptyVisitor

    1.错误描述 2014-7-13 1:45:53 org.apache.struts2.spring.StrutsSpringObjectFactory info 信息: ... initialize ...

  6. Linux显示版本信息并退出

    Linux显示版本信息并退出 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ cat --version cat (GNU coreutils) 8.21 Co ...

  7. nested exception is java.sql.SQLException: IO 错误

    1.错误描述 (mx.messaging.messages::ErrorMessage)#0 body = (null) clientId = "18CE3B03-9709-9DA8-763 ...

  8. Filter组件开发中的SDK基类分析

    DirectShow SDK提供了一套开发Filter的基类源代码.基于这些基类开发Filter将大大简化开发过程. 1.CBaseObject 大部分SDK类都从CBaseObject类(参见com ...

  9. maven项目转eclipse

    很多国外的开源项目是用maven编译的,对于我们比较熟悉eclipse开发的童鞋来说,能转成.project是最好不过了. 很简单,装好maven后,在项目目录打开命令行,输入 mvn eclipse ...

  10. oracle的下载地址以及步骤

    一.下载地址 1.oracle官网:https://www.oracle.com/cn/index.html 2. 点击右上角先选择语音,然后注册一个新账户,如果有oracle直接登录就可以 3.点击 ...