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. BZOJ2780: [Spoj]8093 Sevenk Love Oimaster（广义后缀自动机，Parent树，Dfs序）

    Description Oimaster and sevenk love each other. But recently,sevenk heard that a girl named ChuYuXu ...

  2. git 常用命令（分支）

    查看分支 git branch -r 修改分支名字dev-->test git branch -m dev test 切换分支dev git checkout dev 创建本地分支dev git ...

  3. [NPM] Publish npm packages using npm publish

    In this lesson we will publish our package. We will first add a prepublish script that runs our buil ...

  4. Android DiskLruCache全然解析，硬盘缓存的最佳方案

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/28863651 概述 记得在非常早之前.我有写过一篇文章Android高效载入大图. ...

  5. 2.1 Vue组件

    Vue组件 全局组件和局部组件 父子组件通讯-数据传递 父->子:通过Props传递 子->父:不允许,但vue通过子组件触发Emit来提交给子组件进行触发 Slot import Cou ...

  6. Eclipse如何从导入SVN上导入项目

    1.右键单击,选择 Import,进入导入项目窗口 2.点击选择从SVN检出项目,点击Next下一步 3.选择创建新的资源库位置,点击Next,如果项目之前已经导入过删除掉了,重新导入的时候,只需勾选 ...

  7. 洛谷 P1691 有重复元素的排列问题

    P1691 有重复元素的排列问题 题目描述 设R={r1,r2,……,rn}是要进行排列的n个元素.其中元素r1,r2,……,rn可能相同.使设计一个算法,列出R的所有不同排列. 给定n以及待排列的n ...

  8. 百度糯米iOSclient登录BUG

    环境 设备:iphone5s 网络:WIFI App版本号: 操作步骤 1.进入登录界面 2.输入手机号 3.点击[获取验证码],等待接收验证码后 4.点击[X]退出登录界面 5.反复1-2-3,提示 ...

  9. stm32单片机时钟中断的配置

    原作者:http://www.eeworld.com.cn/mcu/article_2016082828940.html 配置流程:   1:系统时钟初始化,包括系统时钟和要开放的IO口或者功能的时钟 ...

  10. swiper如何实现轮播嵌套轮播

    之所以要写这篇文章是因为插件有个bug,要改掉这个bug比较麻烦,所以就想了个折中的办法,绕过这个限制,方法千万条,功能干出来第一条,哈哈 最近做了个需求,效果图是这样的 第一个框是大轮播,第二个框是 ...