js如何动态添加表格行

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

 

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

1、table元素有属性和一些方法（js使用）

方法一：添加可通过在table的innerHTML属性中添加tr和td来实现

tab.innerHTML+='新增01新增02新增03'

方法二：通过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() 在表格中插入一个新行

三、代码

  
  
  
      
      
  
  
      

      
表格名称
    

         

             
标题1
         
     
     

         

             
单元格11
             
单元格12
             
单元格13
         
         

             
单元格21
             
单元格22
             
单元格23
         
         

             
单元格31
             
单元格32
             
单元格33
         
         
         
备注：