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. System and method for controlling switching between VMM and VM using enabling value of VMM timer indicator and VMM timer value having a specified time

    In one embodiment, a method includes transitioning control to a virtual machine (VM) from a virtual ...

  2. Java开源电商项目比較

    这里比較的都是国外的开源项目,备选项目有: Smilehouse Workspace.Pulse.Shopizer.ofbiz.bigfish.broadleaf 1.Smilehouse Works ...

  3. Android提示版本号更新操作流程

    Android提示版本号更新操作流程 2014年5月8日: andorid的app应用中都会有版本号更新的操作,今天空暇的时候就花了点心思弄了一下.主要技术方面用到了AsyncTask异步载入.htt ...

  4. 关于ES6(ES2015)的知识点详细总结

    ECMAScript6 ECMAScript简称就是ES,你可以把它看成是一套标准,JavaScript就是实施了这套标准的一门语言,现在主流浏览器使用的是ECMAScript5. http://ba ...

  5. web前端背景介绍

    Internet:是一个全球性的计算机互联网络,中文名称“因特网”.“国际互联网”.“网际网”等等: Internet提供的服务:http.ftp.Telnet.email.www.bbs等等: 基本 ...

  6. debian 9 安装后需做的几件事

    debian 9 安装后需做的几件事 安装环境:X86 >> Debian 9 Linux/GNU apt源更新 注意连上有线网络 刚安装好的debian系统中,/etc/apt/sour ...

  7. STL_算法_删除(unique、unique_copy)

    C++ Primer 学习中. . . 简单记录下我的学习过程 (代码为主) 全部容器适用 unique(b,e) unique(b,e,p) unique_copy(b1,e1,b2) unique ...

  8. 国内技术管理人员批阅google的“春运交通图”项目

    在整理一份报告的时候,偶然看到2008年春节期间google推出的“春运交通图”项目建设历程报道,很受启发,随以国内的技术管理人员眼光批阅了这篇文章,同时也是自嘲吧. 以下黑色字体是原报道,红色字体是 ...

  9. 【CS Round #48 (Div. 2 only)】Game of Chance

    [链接]h在这里写链接 [题意] 在这里写题意 [题解] 在这里写题解 [错的次数] 0 [反思] 在这了写反思 [代码] #include <bits/stdc++.h> using n ...

  10. js进阶 13-3 jquery动画显示隐藏，滑动，淡入淡出的本质是什么

    js进阶 13-3 jquery动画显示隐藏,滑动,淡入淡出的本质是什么 一.总结 一句话总结:分别改变display,高度,opacity透明度这三种属性. 1.fade系列函数有哪四个? fade ...