js如何实现动态在表格中添加标题和去掉标题？

一、总结

1、通过table标签的createCaption()，deleteCaption()方法实现。

document.getElementById('tab').deleteCaption()

var cap=document.getElementById('tab').createCaption();

二、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="deltr()"></p>

     <p><input type="button" value="删除标题" onclick="delCap()">

     <input type="button" value="添加标题" onclick="creCap()"></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)

     function deltr(){

         var tab=document.getElementById('tab');

         var rows=tab.rows;

         var rlen=rows.length //当前的行数

         tab.deleteRow(rlen-)

     }

     function delCap(){

     // var tab=document.getElementById('tab');

     // tab.deleteCaption()

     document.getElementById('tab').deleteCaption()

     }

     function creCap(){

         var cap=document.getElementById('tab').createCaption();

         cap.innerHTML='createCaption()增加的标题'

         cap.style.color='green';

     }

     </script>

 </body>

 </html>

四、测试题-简答题

1、表格动态添加行和删除行所用到的table标签方法?

解答：insertRow()，deleteRow() 驼峰命名法。

2、表格动态添加标题和删除标题所用到的table标签方法?

解答：createCaption()，deleteCaption() 驼峰命名法，这里是create。

3、表格动态添加行和动态添加标题的标签方法区别？

解答：一个是insert，一个是create。

4、表格insertRow或者createCaption出来的行或者标题有内容么？

解答：没有，都是空的，方法的返回值是标签，可以通过标签的innerHTML属性添加内容。

5、表格标签createCaption()方法的返回值是什么？

解答：caption标签。

6、如何给createCaption()方法动态创建出来的表格标题添加背景色？

解答：获取createCaption()方法创建出来的caption标签，给caption标签的style中的background赋值颜色即可。

7、如何保证表格动态删除行的时候都是删除的最后一行？

解答：删除前都动态获取表格的行数，然后就删最后一行。

8、如何动态获取表格的行数？

解答：table.rows.length。

9、document.getElementById('tab')获取的是什么，tab是一个表格的id？

解答：table标签，也就是dom中的table对象。

js如何实现动态在表格中添加标题和去掉标题？的更多相关文章

  1. ajax异步获取数据后动态向表格中添加数据(行)

    因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有 看到现成的,决定自己写个例子 1.HTML页面 <!doctype html> ...

  2. js如何实现动态的在表格中添加和删除行？（两种方法）

    js如何实现动态的在表格中添加和删除行?(两种方法) 一.总结 1.table元素有属性和一些方法(js使用) 方法一:添加可通过在table的innerHTML属性中添加tr和td来实现 tab.i ...

  3. spring：如何用代码动态向容器中添加或移除Bean ？

    先来看一张类图: 有一个业务接口IFoo,提供了二个实现类:FooA及FooB,默认情况下,FooA使用@Component由Spring自动装配,如果出于某种原因,在运行时需要将IFoo的实现,则F ...

  4. 原生js怎么为动态生成的标签添加各种事件

    这几天用zepto.js写了不少事件,突然想到一个问题,那就是原生的js如何给动态生成的标签添加事件?因为这些标签都是后来通过ajax或者运行其他点击事件生成的,那么如果之前给他们写事件他们这个dom ...

  5. ag-grid 表格中添加图片

    ag-grid是一种非常好用的表格,网上搜索会有各种各样的基本用法,不过对于在ag-grid 表格中添加图片我没有找到方法,看了官方的文档,当然英文的自己也是靠网页翻译,最后发现有这么一个例子,我知道 ...

  6. iview+vue 表格中添加图片

    开门见山,话不多说,要在表格中添加图片,可以使用td: <table " width="100%"> <tr class="tr-style ...

  7. oracle数据库查询日期sql语句（范例）、向已经建好的表格中添加一列属性并向该列添加数值、删除某一列的数据（一整列）

    先列上我的数据库表格: c_date(Date格式)     date_type(String格式) 2011-01-01                   0 2012-03-07         ...

  8. js动态向页面中添加表格

    我们在实际开发中经常会想要实现如下情况: 点击某个按钮,然后动态的网页面里面添加一个表格或者一行,这个更加灵活方便.但是实现起来肯定不能像在页面里面直接写标签来的容易,以下是我项目中的代码,拿过来分享 ...

  9. 利用javascript动态向网页中添加表格

    效果图如下: 以下是代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

随机推荐

  1. Robot Framework初步使用

    第一步,新建一个Project:

  2. Spring异步执行(@Async)2点注意事项

    Spring中可以异步执行代码,注解方式是使用@Async注解. 原理.怎么使用,就不说了. 写2点自己遇到过的问题. 1.方法是公有的 // 通知归属人 @Async public void not ...

  3. 数据类型的提升（promotion）

    假如参与运算的数据类型不同或者取值范围过小,编译器会自动将其转换为相同的类型,这个类型就叫数据类型的提升(promotion). 1. C++ 语言环境的规定 unsigned char a = 17 ...

  4. php网站修改为https后curl报错301

    今日测试项目时需调用post模拟传参测试接口是否可用,但返回报错信息(301永久迁移),在网上搜寻解决办法无果,最后发现只要将跳转地址修改为https://+url的形式就可以了

  5. ThinkPHP5.0---删除数据

    删除特定记录 public function delete() { // 获取要删除的对象:关键字为16 $Teacher = Teacher::); // 删除对象 $Teacher->del ...

  6. BC 52 div2 A Victor and Machine

    简单数学题,把这道题目贴上去的不过为了不想看到这个月写了某个数字篇博客,该数字有点不吉利... 近期没有学习的欲望.. . 集中不了注意力,今天打BC还是做出来一题,尽管涨分了,真心希望能接近cf的水 ...

  7. amazeui学习笔记--css（布局相关3）--辅助类Utility

    amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...

  8. Windows下合并tar分卷

    如有例如以下几个tar分卷:logs.tar.gza1.logs.tar.gza2.logs.tar.gza3.在Windows下怎样进行合并呢? 按"win+r"键在弹出的输入框 ...

  9. [Angular2 Router] Redirects and Path Matching - Avoid Common Routing Pitfall

    In this tutorial we are going to learn how we can can configure redirects in the angular 2 router co ...

  10. express 学习笔记（一）路由

    先导入express: var express = require('express'); var app = express(); 1.路由方法: get, post, put, head, del ...