js如何动态添加表格行

一、总结
- 方法一：添加可通过在table的innerHTML属性中添加tr和td来实现
- 方法二：通过table的属性insertRow()，deleteRow()来实现
- 方法一和方法二对比：
二、js如何实现动态的在表格中添加和删除行？
- 1、插入删除行案例说明
- 2、用到table相关的属性和方法
三、代码

> 一、总结（点击显示或隐藏总结内容）

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="增加行" οnclick="addtr()"><input type="button" value="删除行" οnclick=""></p><p><input type="button" value="删除标题" οnclick=""><input type="button" value="添加标题" οnclick=""></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'*//*//增加行的方法1function 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>

js如何动态添加表格行相关推荐

php 动态添加表格行,jQuery给html表格动态添加行方法总结
这次给大家带来jQuery给html表格动态添加行方法总结,jQuery给html表格动态添加行的注意事项有哪些,下面就是实战案例,一起来看一下. 本文实例讲述了jQuery实现html表格动态添加新 ...
用js实现动态添加表格数据
第一种方式: <!DOCTYPE HTML> < html > < head > < meta charset = UTF -8> < titl ...
动态增删表格行(纯JS写法)
动态增删表格行(纯JS写法) 归档进行表格下行的动态增加与删除 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional// ...
antd table合并行或者列（动态添加合并行、列）
antd table合并行或者列(动态添加合并行.列) 表头只支持列合并,使用 column 里的 colSpan 进行设置. 表格支持行/列合并,使用 render 里的单元格属性 colSpan ...
js动态添加html元素绑定事件,JS实现动态添加DOM节点和事件的方法示例
本文实例讲述了JS实现动态添加DOM节点和事件的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: /p> "http://www.w3.org/TR/xht ...
js中动态添加/插入HTML代码块，并通过JQuery动态绑定点击事件
文章目录前言一.场景需求还原二.代码示例 1.引入JQuery库 2.代码示例一:HTML中div标签部分二:HTML中script标签部分三:JS文件部分总结前言本篇文章中讲的是在 ...
jQuery+Ajax动态添加表格
最近做课设,涉及到前端知识,设计的项目需要用jQuery动态添加删除html中table的tr和td,试遍了网上的代码都无济于事,无奈只能自己编写.先展示运行结果: 详细代码如下: dao层代码: / ...
原生js清空上一个元素内容_原生JS实现动态添加新元素、删除元素方法
1. 添加新元素动态添加新元素 Coffee Tea Coffee Tea var child = document.getElementsByClassName("child" ...
DataGridView动态添加新行的两种方法
简单介绍如何为DataGridView控件动态添加新行的两种方法: 方法一: int index=this.dataGridView1.Rows.Add(); this.dataGridView1. ...