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. 2018/8/15 qbxt 测试

    2018/8/15 qbxt 测试 期望得分:100:实际得分:50   不知道为什么写挂了,明明是个水题 T^T 思路:模拟 注意:如果用 char 类型存储的话,如果有'z' + 9 会爆char ...

  2. 【Oracle错误集锦】：PLSQL无法直连64位Oracle11g数据库

    背景:Oracle数据库装在本机上,使用PLSQL连接. 今天安装完Oracle 11g数据库后.用plsql连接数据库死活都连接不上.而且plsql客户端登录窗体的Database下拉框还为空.见下 ...

  3. Python基础教程之第1章 基础知识

    #1.1 安装Python #1.1.1 Windows #1.1.2 Linux和UNIX #1.1.3 Macintosh #1.1.4 其它公布版 #1.1.5 时常关注.保持更新 #1.2 交 ...

  4. Vue 拖拽组件 vuedraggable 和 awe-dnd

    vuedraggable:https://www.npmjs.com/package/vuedraggable awe-dnd:https://www.npmjs.com/package/awe-dn ...

  5. 【组件】微信小程序input搜索框的实现

    开发小程序的过程,是一个学习知识,解决问题的过程,每当实现了一个需求,总会有很大的成就感,每天记录一个开发过程中的细节.实现效果如下: 官方参考链接:https://developers.weixin ...

  6. 【Codeforces Round #431 (Div. 2) C】From Y to Y

    [链接]点击打开链接 [题意] 让你构造一个大小最多为10W的字符multiset. 你进行n-1次操作; 每次操作,从set中取出两个字符串,一开始单个字符被认为是字符串. 然后把它们连接在一起. ...

  7. 判断Bigdecimal类型是否等于0的方法

    1.我之前用来判断Bigdecimal类型是否等于0的方法 b.equals(BigDecimal.ZERO); 用equals方法和BigDecimal.ZERO进行比较. 2.上面方法存在的问题 ...

  8. Qt的一些开发技巧

    Lambda匿名函数 有时候槽函数代码辑逻辑非常简单,可以直接用下面的Lambda匿名函数处理信号,简捷明了.需c++11支持,不支持自身递归调用. 1 2 3 4 5 6 7 QComboBox * ...

  9. Redis 哨兵（sentinel）模式集群配置（5.0.3版本）

    一.准备工作 1.系统环境:centos6.4 2.服务器六台(1主5从): 192.168.1.161(master) 192.168.1.162(slave) 192.168.1.163(slav ...

  10. 关于Android中设置闹钟的相对比较完善的解决方案

    我当时说承诺为大家写一个,一直没空,直到最近又有人跟我要,我决定抽时间写一个吧.确实设置闹钟是一个比较麻烦的东西.我在这里写的这个demo抽出来了封装了一个类库,大家直接调用其中的设置闹钟和取消闹钟的 ...