js如何实现动态克隆一个表格?
js如何实现动态克隆一个表格?
一、总结
1、通过innerHTML实现表格内容复制,
2、通过表格dom的属性(比如border)实现属性赋值,
3、通过表格dom的样式style实现样式的复制。
二、js如何实现动态克隆一个表格?
1、克隆表格案例描述
- 实例描述:
实现表格及其内容的复制
- 案例要点:
通过innerHTML可以轻松实现表格内容的复制
表格的属性需要单独的复制
2、用到的table标签的属性
Table 对象常用属性
- frame 设置或返回表格的外部边框。
- rules 设置或返回表格的内部边框(行线)。
- caption 对表格的 caption 元素的引用。
- cellPadding 设置或返回单元格内容和单元格边框之间的空白量。
- cellSpacing 设置或返回在表格中的单元格之间的空白量。
- summary 设置或返回对表格的描述(概述)。
- tFoot/tHead 返回表格的 TFoot /tHead对象。如果不存在该元素,则为 null。
- border/width/id......
三、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>8.4 演示文档</title>
<style type="text/css">
</style>
</head>
<body>
<table id="tab" border="1">
<caption>表格名称</caption>
<thead>
<tr>
<th colspan="3">标题1</th>
</tr>
</thead>
<tbody>
<tr>
<td>单元格11</td>
<td>单元格12</td>
<td>单元格13</td>
</tr>
<tr>
<td>单元格21</td>
<td>单元格22</td>
<td>单元格23</td>
</tr>
<tr>
<td>单元格31</td>
<td>单元格32</td>
<td>单元格33</td>
</tr>
</tbody>
<tfoot><td>备注:</td><td colspan="2"></td></tfoot>
</table>
<input type="button" value="复制表格" onclick="copytab()">
<script>
function copytab(){
var tab=document.getElementById('tab');
var cotab=document.createElement('table')
cotab.innerHTML=tab.innerHTML;
cotab.border=tab.border;
cotab.style.marginTop='20px';
cotab.caption.innerHTML='我是复制的'
document.body.appendChild(cotab)
} </script>
</body>
</html>
四、测试题-简答题
1、如何动态创建一个表格?
解答:通过document的createElement方法,然后然后将创建好的这个dom表格对象加到document的body属性中。
2、如何通过document的createElement方法创建一个表格的dom对象,createElement方法的参数是什么?
解答:var cotab=document.createElement('table') 参数是'table'
3、appendChild的作用是什么?
解答:append是附加贴上的意思,appendChild就是给某个元素贴上孩子的意思。
4、为什么需要appendChild方法?
解答:document的createElement方法创建出来的dom标签对象,如果不append到实体dom标签,那样根本就没加到dom树种,那样创建dom没有意义。
5、如何动态实现表格内容的复制?
解答:通过dom表格的innerHTML属性,cotab.innerHTML=tab.innerHTML;
6、document的createElement方法的返回值是什么?
解答:createElement方法的返回值是创建出来的dom标签对象。
7、如何动态实现表格边框的复制?
解答:通过dom表格标签的border属性。 cotab.border=tab.border;
8、如何动态实现表格样式的复制?
解答:通过dom表格标签的style属性。
9、table标签的常见属性有哪些?
解答:边框border,标题caption等等
10、如何动态修改表格的标题?
解答:通过表格dom对象的caption属性的innerHTML属性。
cotab.border=tab.border;
js如何实现动态克隆一个表格?的更多相关文章
- js如何实现动态的在表格中添加和删除行?(两种方法)
js如何实现动态的在表格中添加和删除行?(两种方法) 一.总结 1.table元素有属性和一些方法(js使用) 方法一:添加可通过在table的innerHTML属性中添加tr和td来实现 tab.i ...
- 浅谈js中如何动态添加表头/表列/表格内容
我想很多童鞋用js动态向表格中添加数据很熟悉,而且也觉得非常简单!是的,对于写页面的童鞋来说,最喜欢写查询的页面了,动态向表格绑定数据.用for循环就可以轻松搞定. 如果我们的业务需求有所变化,可能我 ...
- js如何实现动态在表格中添加标题和去掉标题?
js如何实现动态在表格中添加标题和去掉标题? 一.总结 1.通过table标签的createCaption(),deleteCaption()方法实现. document.getElementById ...
- 如何用easyui+JAVA 实现动态拼凑datagrid表格(续)
前面一段时间写了一篇文章: 如何用easyui+JAVA 实现动态拼凑datagrid表格 这篇文章的话,效果是可以实现,但是经过我反复试验,还是存在一些问题的. 今天这篇文章就是向大家介绍下如何避免 ...
- js如何实现动态点击改变单元格颜色?
js如何实现动态点击改变单元格颜色? 一.总结 1.通过table的rows属性,遍历表格所有行,然后通过cells属性,遍历每一行中的单元格. 2.遍历的过程中,动态的为每一个单元格定义单击事件,改 ...
- bootstrap做了一个表格
花了一下午做了一个表格: 大致是这样: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf ...
- 利用scrapy-splash爬取JS生成的动态页面
目前,为了加速页面的加载速度,页面的很多部分都是用JS生成的,而对于用scrapy爬虫来说就是一个很大的问题,因为scrapy没有JS engine,所以爬取的都是静态页面,对于JS生成的动态页面都无 ...
- [jQuery编程挑战]003 克隆一个页面元素及其相关事件
挑战: a) 绑定一个点击方法到这个div,点击后此元素会淡出消失 b) 同时克隆一个新的div元素到页面,元素内容是前面div文字内容反向书写(即,sgatbg olleh),同样也具有上面的点击事 ...
- 原生js怎么为动态生成的标签添加各种事件
这几天用zepto.js写了不少事件,突然想到一个问题,那就是原生的js如何给动态生成的标签添加事件?因为这些标签都是后来通过ajax或者运行其他点击事件生成的,那么如果之前给他们写事件他们这个dom ...
随机推荐
- CISP/CISA 每日一题 12
CISA 每日一题(答) 支付系统模式有哪些: 电子现金模式:支付者不必在线,无条件不可追溯性 电子支票模式:支付者不必在线,涉及个人隐私 电子转帐模式:收款人不必在线 图象处理中,应该有适当的___ ...
- 洛谷 P1194 买礼物
洛谷 P1194 买礼物 题目描述 又到了一年一度的明明生日了,明明想要买B样东西,巧的是,这B样东西价格都是A元. 但是,商店老板说最近有促销活动,也就是: 如果你买了第II样东西,再买第J样,那么 ...
- POJ——T 1006 Biorhythms
http://poj.org/problem?id=1006 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 138219 ...
- zookeeper 配置文件说明(zoo.cfg)
clientPort # 客户端连接server的port,即对外服务port,一般设置为2181. dataDir # 存储快照文件snapshot的文件夹. 默认情况下.事 ...
- leetCode解题报告5道题(十)
题目一:Valid Number Validate if a given string is numeric. Some examples: "0" => true &quo ...
- Express框架是什么
Express框架是什么 一.总结 1.express框架:基于node.js的web应用框架,可快速搭建一个完整功能的网站,丰富的HTTP工具以及来自Connect框架的中间件随取随用. 二.Exp ...
- grep 过滤器基础
grep是一种文本搜索工具,能使用正则表达式搜索文本,并把匹配的行显示出来. grep 选项 模式 文件 grep "bash" /etc/passwd 将/etc/passwd下 ...
- Servlet的异常处理机制
一 声明式异常处理 在web.xml中对声明对各种异常的处理方法. 通过 <error-page>元素来声明. 此元素的结构如下: +------ ...
- [Firebase] Firebase Cloud Functions
Firebase cloud functions is similar to AWS lambda or serverless. You can deploy you code which wrote ...
- Codeforces #144 (Div. 1) B. Table (组合数学+dp)
题目链接: B.Table 题意: \(n*m\)的矩阵使每个\(n*n\)矩阵里面准确包含\(k\)个点,问你有多少种放法. \((1 ≤ n ≤ 100; n ≤ m ≤ 10^{18}; 0 ≤ ...