js如何实现动态的在表格中添加和删除行?(两种方法)
js如何实现动态的在表格中添加和删除行?(两种方法)
一、总结
1、table元素有属性和一些方法(js使用)
方法一:添加可通过在table的innerHTML属性中添加tr和td来实现
tab.innerHTML+='<tr style="background: green"><td>新增01</td><td>新增02</td><td>新增03</td></tr>'
方法二:通过table的属性insertRow(),deleteRow()来实现
var tradd=tab.insertRow(4) 返回值是表格行元素
方法一和方法二对比:
相同点:
都是给元素增加innerHTML
不同点:
方法二灵活超级多:方法一是给table增加innerHTML,方法二是给行元素增加innerHTML,当然方法二要灵活的多
二、js如何实现动态的在表格中添加和删除行?
1、插入删除行案例说明
- 实例描述:
动态的插入删除行以及表格标题等
- 案例要点:
掌握table对象的insertRow(),deleteRow(),createCaption(),deleteCaption()等方法。
2、用到table相关的属性和方法
Table 对象方法
- createCaption() 为表格创建一个 caption 元素。
- createTFoot() 在表格中创建一个空的 tFoot 元素。
- createTHead() 在表格中创建一个空的 tHead 元素。
- deleteCaption() 从表格删除 caption 元素以及其内容。
- deleteRow() 从表格删除一行。
- deleteTFoot() 从表格删除 tFoot 元素及其内容。
- deleteTHead() 从表格删除 tHead 元素及其内容。
- insertRow() 在表格中插入一个新行。
三、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格专题</title>
</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>
<p><input type="button" value="增加行" onclick="addtr()">
<input type="button" value="删除行" onclick=""></p>
<p><input type="button" value="删除标题" onclick="">
<input type="button" value="添加标题" onclick=""></p>
<script type="text/javascript">
/*
var tab=document.getElementById('tab') //获取表格元素
var rows=tab.rows; //返回包含表格中所有行的一个数组。
cells=rows[1].cells //某一行的单元格
alert(rows[1].cells[2].innerHTML)
rows[1].cells[2].innerHTML='数据13';
rows[1].cells[2].style.color='red'
*/
/*
//增加行的方法1
function addtr(){
var tab=document.getElementById('tab');
tab.innerHTML+='<tr style="background: green"><td>新增01</td><td>新增02</td><td>新增03</td></tr>'
}
// addtr()
// addtr()
*/
//增加行的方法2
//更加的灵活
function addtr(){
var tab=document.getElementById('tab');
var tradd=tab.insertRow(4)
tradd.style.background='green'
tradd.innerHTML='<td>新增01</td><td>新增02</td><td>新增03</td>'
}
tab.deleteRow(0)
tab.deleteRow(0)
</script>
</body>
</html>
四、测试题-简答题
1、js的字符串中双引号套双引号肯定是错误的,怎么解决这个问题?
解答:将外面的双引号改为单引号,js字符串规范为单引号,html属性规范为双引号:
tab.innerHTML+='<tr style="background: green"><td>新增01</td><td>新增02</td><td>新增03</td></tr>'
2、table属性innerHTML和table方法insertRow的层级关系如何?
解答:都在同一级,都是getElementById获取元素后直接点的方式,var tab=document.getElementById('tab');
3、table方法insertRow插入行后,如何修改插入这行的背景颜色和内容?
解答:insertRow方法有返回值,返回值就是插入的这行的对象,所以我们可以给这个对象设置style和innerHTML来实现插入背景颜色和内容。
var tradd=tab.insertRow(4)
tradd.style.background='green'
tradd.innerHTML='<td>新增01</td><td>新增02</td><td>新增03</td>'
js如何实现动态的在表格中添加和删除行?(两种方法)的更多相关文章
- 关于MySQL中添加数据的两种方法
下面介绍两种执行SQL命令的方法,并作出相应地总结,第一种介绍一种常规用法,下面进行做简要地分析,首先我们需要执行打开数据库操作首先创建一个MySqlConnection对象,在其构造函数中传入一个连 ...
- WPF中RichTextBox中添加文字的两种方法
RichTextBox控件不同于TextBox控件,后者可以直接通过其Text属性绑定或者在后台动态添加文字. (一)使用数据绑定 <RichTextBox FontSize="12& ...
- vue中使用echarts的两种方法
在vue中使用echarts有两种方法一.第一种方法1.通过npm获取echarts npm install echarts --save 2.在vue项目中引入echarts 在 main.js 中 ...
- php获取数组中重复数据的两种方法
分享下php获取数组中重复数据的两种方法. 1,利用php提供的函数,array_unique和array_diff_assoc来实现 <?php function FetchRepeatMem ...
- [转]Qt中定时器使用的两种方法
Qt中定时器的使用有两种方法,一种是使用QObject类提供的定时器,还有一种就是使用QTimer类. 其精确度一般依赖于操作系统和硬件,但一般支持20ms.下面将分别介绍两种方法来使用定时器. 方法 ...
- python中执行shell的两种方法总结
这篇文章主要介绍了python中执行shell的两种方法,有两种方法可以在Python中执行SHELL程序,方法一是使用Python的commands包,方法二则是使用subprocess包,这两个包 ...
- mysql 中添加索引的三种方法
原文:http://www.andyqian.com/2016/04/06/database/mysqleindex/ 在mysql中有多种索引,有普通索引,全文索引,唯一索引,多列索引,小伙伴们可以 ...
- Ajax中解析Json的两种方法详解
eval(); //此方法不推荐 JSON.parse(); //推荐方法 一.两种方法的区别 我们先初始化一个json格式的对象: var jsonDate = '{ "name&qu ...
- Ajax中解析Json的两种方法
eval(); //此方法不推荐 JSON.parse(); //推荐方法 一.两种方法的区别 我们先初始化一个json格式的对象: var jsonDate = '{ "name" ...
随机推荐
- 3/18 Django框架 启动django服务
web框架:本质是socket服务端,socket通常也被称为"套接字",用于描述IP地址和端口,是一个通信链的句柄,可以用来实现不同虚拟机或不同计算机之间的通信.web框架就是将 ...
- 【2017 Multi-University Training Contest - Team 9】FFF at Valentine
[链接]http://acm.hdu.edu.cn/showproblem.php?pid=6165 [题意] 一张有向图,n个点,m条边,保证没有重边和自环.询问任意两个点能否满足任何一方能够到达另 ...
- 洛谷 P1755 斐波那契的拆分
P1755 斐波那契的拆分 题目背景 无 题目描述 已知任意一个正整数都可以拆分为若干个斐波纳契数,现在,让你求出n的拆分方法 输入输出格式 输入格式: 一个数t,表示有t组数据 接下来t行,每行一个 ...
- 【Energy Forecasting】能源预測的发展和展望
说明 本文的内容来自Tao Hong博士的Energy Forecasting: Past, Present and Future一文的翻译和整理. 引入 能源预測包括了电力行业中有关预測的广泛的内容 ...
- zico源代码分析(二) 数据读取和解析部分
第一部分:分析篇 首先,看一下zico的页面,左侧是hostname panel,右侧是该主机对应的traces panel. 点击左侧zorka主机名,右侧panel会更新信息,在火狐浏览器中使用f ...
- code-代码平台服务器路径
下面记录的是各个平台的服务器路径(va使用) ("repo init -u ssh://vanzo/platform_89/manifest.git") ("repo i ...
- 有关Canvas的一点小事—图像绘制
1. 使用canvas绘制图像 什么是图像?在js中它就是一个<img src=””>,<img>有两种接收图像信息的方法,一个是直接链接到图像地址,一个使用base64数据 ...
- JSP学习 —— 开篇:JSP,servlet容器,Tomcat,servlet容器之间的关系
JSP(JAVA SERVER PAGE)的缩写,其本身就是servlet的简化,是一种动态网页标准,其特点是在HTML代码中嵌入JAVA代码,JSP标签或用户标签来生成网页.至于它为什么会出现,主要 ...
- Android实践 -- 设置系统日期时间和时区
设置系统日期时间和时区 设置系统的日期时间和时区,需要 系统权限和系统签名,android:sharedUserId="android.uid.system" 需要在manifes ...
- 分治法(divide & conquer)与动态规划(dynamic programming)应用举例
动态规划三大重要概念:最优子结构,边界,状态转移公式(问题规模降低,如问题由 n 的规模降低为 n−1 或 n−2 及二者之间的关系): 0. 爬台阶 F(n)⇒F(n−1)+F(n−2) F(n−1 ...