使用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 ...
随机推荐
- SQL中partition关键字的使用
最近在写后台语句时候,运用到了partition这样一个关键字. 先大致说一下背景,有一种数据表,如下 现在需要取出,每一个人最近的一次打卡时间. 思路是,先把数据按照人名分组,然后在每个组里面按照时 ...
- Django学习-5-模板渲染
1. {{ 变量名 }} def func(request): return render(request, ...
- 在.Net Core中使用MongoDB的入门教程(一)
首先,我们在MongoDB的官方文档中看到,MongoDb的2.4以上的For .Net的驱动是支持.Net Core 2.0的. 所以,在我们安装好了MangoDB后,就可以开始MangoDB的.N ...
- sql一张表中两个字段指向同一个外键
在项目开发中遇到这么一个例子,首先产品表 tb_product ----------------------------- id name 1 手机 2 电脑 3 笔记本 ...
- JDBCTemplate简化JDBC的操作(一)
接触过JAVA WEB开发的朋友肯定都知道Hibernate框架,虽然不否定它的强大之处,但个人对它一直无感,总感觉不够灵活,太过臃肿了. 今天来说下Spring中关于JDBC的一个辅助类(JDBC ...
- C#属性的使用--C#基础
1.属性的作用:保护字段,对字段取值与赋值进行限定 2.属性的使用: _name(属性名)public [对应字段类型] 属性名Name{ get{return _name;} set{_name=v ...
- numpy使用总结
numpy是Python中常用的数据处理库的基础库,一般通过import numpy as np的方式导进 科学计算库numpy 在numpy中,主要的数据结构是ndarray,在numpy中称为数组 ...
- 在VCS仿真器中使用FSDB[转载]
来源:https://www.cnblogs.com/catannie/p/8099331.html FSDB(Fast Signal Database)是Verdi支持的文件格式,用于保存仿真产生的 ...
- 【BZOJ4407】于神之怒加强版(莫比乌斯反演)
[BZOJ4407]于神之怒加强版(莫比乌斯反演) 题面 BZOJ 求: \[\sum_{i=1}^n\sum_{j=1}^mgcd(i,j)^k\] 题解 根据惯用套路 把公约数提出来 \[\sum ...
- PKUWC2018游记
PKUWC2018游记 Day -inf 从去年的12月底开始停课,到现在也有整整一个月的时间了. 前两周考的是OI赛制,后来就变成了IOI赛制. 整体上考的很炸,虐场的次数远少于被虐的次数. 关于去 ...