DOM中表格的操作方法总结

<table/>元素的方法如下：
  • caption：指向<caption/>元素（如果存在）；
  • tBodies：<tbody/>元素的集合；
  • tFoot：指向<tfoot/>元素（如果存在）；
  • tHead：指向<thead/>元素（如果存在）；
  • rows：表格中所有行的集合；
  • createTHead()：创建<thead/>元素并将其放入表格；
  • createTFoot()：创建<tfoot/>元素并将其放入表格；
  • createCaption()：创建<caption/>元素并将其放入表格；
  • deleteTHead()：删除<thead/>元素；
  • deleteTFoot()：删除<tfoot/>元素；
  • deleteCaption()：删除<caption/>元素；
  • deleteRow(position)：删除指定位置上的行；
  • insertRow(position)：在rows集合中指定的位置上插入一新行。
<tbody/>元素的方法如下：
  • rows：<tbody/>中所有行的集合；
  • deleteRow(position)：删除指定位置上的行；
  • insertRow(position)：在rows集合中指定的位置上插入一新行。
<tr/>元素的方法如下：
  • cells：<tr/>元素中所有的单元格的集合；
  • deleteCell(position)：删除给定位置上的单元格；
  • insertCell(position)：在Cells集合的给定位置上插入一个新的单元格。
  1. //创建table
  2. var table = document.createElement("table");
  3. table.border = 1;
  4. table.width = "100%";
  5.  
  6. //创建tbody
  7. var tbody = document.createElement("tbody");
  8. table.appendChild(tbody);
  9.  
  10. //创建第一行
  11. tbody.insertRow(0);
  12. tbody.rows[0].insertCell(0);
  13. tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1"));
  14. tbody.rows[0].insertCell(1);
  15. tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1"));
  16.  
  17. //创建第二行
  18. tbody.insertRow(1);
  19. tbody.rows[1].insertCell(0);
  20. tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2"));
  21. tbody.rows[1].insertCell(1);
  22. tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2"));
  23.  
  24. //将表格添加到文档主体中
  25. document.body.appendChild(table);

表格隔行变色实例：

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>隔行变色</title>
  6. <script>
  7. window.onload=function ()
  8. {
  9.     var oTab=document.getElementById('tab1');
  10.     var oldColor='';  //用于保存原本的颜色
  11.  
  12.     for(var i=0;i<oTab.tBodies[0].rows.length;i++)
  13.     {
  14.         //鼠标经过变色
  15.         oTab.tBodies[0].rows[i].onmouseover=function ()
  16.         {
  17.             oldColor=this.style.background;  //获取原本的颜色
  18.             this.style.background='green';
  19.         };
  20.         oTab.tBodies[0].rows[i].onmouseout=function ()
  21.         {
  22.             this.style.background=oldColor;
  23.         };
  24.         //隔行变色设置
  25.         if(i%2)
  26.         {
  27.             oTab.tBodies[0].rows[i].style.background='';
  28.         }
  29.         else
  30.         {
  31.             oTab.tBodies[0].rows[i].style.background='#CCC';
  32.         }
  33.     }
  34. };
  35. </script>
  36. </head>
  37.  
  38. <body>
  39. <table id="tab1" border="1" width="500">
  40.     <thead>
  41.         <td>ID</td>
  42.         <td>姓名</td>
  43.         <td>年龄</td>
  44.     </thead>
  45.     <tbody>
  46.         <tr>
  47.             <td>1</td>
  48.             <td>Blue</td>
  49.             <td>27</td>
  50.         </tr>
  51.         <tr>
  52.             <td>2</td>
  53.             <td>张三</td>
  54.             <td>23</td>
  55.         </tr>
  56.         <tr>
  57.             <td>3</td>
  58.             <td>李四</td>
  59.             <td>28</td>
  60.         </tr>
  61.         <tr>
  62.             <td>4</td>
  63.             <td>王五</td>
  64.             <td>25</td>
  65.         </tr>
  66.         <tr>
  67.             <td>5</td>
  68.             <td>张伟</td>
  69.             <td>24</td>
  70.         </tr>
  71.     </tbody>
  72. </table>
  73. </body>
  74. </html>

DOM中表格的操作方法总结的更多相关文章

  1. DOM操作表格

    前面的话 表格table元素是HTML中最复杂的结构之一.要想创建表格,一般都必须涉及表示表格行.单元格.表头等方面的标签.由于涉及的标签多,因而使用核心DOM方法创建和修改表格往往都免不了要编写大量 ...

  2. DOM之表格与表单基础分享

    我是沐晴,好久不见.马上要放假啦,也是比较的忙. 今天来谈谈表格和表单的基本知识.前期的写的都是比较基础的知识,后期会慢慢增加实例.一起来学习吧. 先看表格,DOM中提供了一些属性,便于我们获取表单节 ...

  3. DOM系列---DOM操作表格

    DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本篇章主要了解一下DOM操作表格. 一．操作表格 <table>标签是H ...

  4. DOM（七）使用DOM控制表格

    表格的css控制就先不说了,首先分享下表格常用的DOM 表格添加操作的方法常用的为insertRow()和insertCell()方法. row是从零开始计算起的,例如: var oTr = docu ...

  5. DOM 中 Property 和 Attribute 的区别

    原文地址:http://web.jobbole.com/83129/ property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(property:属性,attribute: ...

  6. 第一百一十五节，JavaScript，DOM操作表格

    JavaScript,DOM操作表格 学习要点: 1.操作表格 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DO ...

  7. DOM拓展表格小练习

    涉及的知识点 DOM操作HTML页面.DOM操控表格.一些基本的事件.遍历知识.数组字符串知识.函数的作用域知识 效果图 html代码 <body><div id="con ...

  8. JavaScript(第二十天)【DOM操作表格及样式】

    DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DOM操作表格和样式的一些知识. 一．操作表格 <table& ...

  9. Javascript高级编程学习笔记（45）——DOM 操作表格及DOM动态集合

    操作DOM表格 早些时候,HTML 还是以表格布局为主, 所以DOM操作表格是比较重要的一点 但是现如今 有其它的选择,所以表格的操作也就慢慢地淡出了人们的视线 所以这里也就不过多去详细展开,这里也就 ...

随机推荐

  1. VS2017上执行VS2013项目错误MSB802之解决方案

    进行想把我编写的数字图像处理软件MagicHouse更新到最新的VS2017开发环境下,原来的开发环境是VS2013.但是用VS2017打开项目并编译时,系统报错误MSB802,如下图所示. 其实Vi ...

  2. Linux安装RabbitMq-Centos7版本

    一.Linux系统中安装RabbitMQ 由于RabbitMQ依赖于Erlang,所以先要在机器上安装Erlang环境 单机版 1.安装GCC GCC-C++ Openssl等模块 yum -y in ...

  3. CF293B Distinct Paths 搜索

    传送门 首先数据范围很假 当\(N + M - 1 > K\)的时候就无解 所以对于所有要计算的情况,\(N + M \leq 11\) 超级小是吧,考虑搜索 对于每一个格子试填一个数 对于任意 ...

  4. Scala学习(六)练习

    Scala中的对象&练习 1. 编写一个Conversions对象,加入inchesToCentimeters,gallonsToLiters和milesToKilometers方法 程序代码 ...

  5. 面试2——java基础1

    1.int和Integer的区别 1.Integer是int的包装类,int则是java的一种基本数据类型 2.Integer变量必须实例化后才能使用,而int变量不需要 3.Integer实际是对象 ...

  6. 从统计局采集最新的省市区县数据，纯js

    本文更新(移步查阅): 19-04-15 新采集了2018的省市区三级坐标和行政区域边界 19-03-22 采集了2018的城市数据 18-11-28 采集了2017的城市数据 数据下载 GitHub ...

  7. subprocess.Popen指令包含中文导致乱码问题解决

    其实解决起来非常简单,如果了解到Windows中文系统编码为GB2312的话 只需将你包含中文的指令字符串编码为GB2312即可 cmd = u'cd 我的文档' cmd.encode('gb2312 ...

  8. SpringBoot日记——ElasticSearch全文检索

    看到标题的那一串英文,对于新手来说一定比较陌生,而说起检索,应该都知道吧. 这个ElasticSearch目前我们的首选,他主要有可以提供快速的存储.搜索.分析海量数据的作用.他是一个分布式搜索服务, ...

  9. 编写脚本自动部署反向代理、web、nfs

    服务器端 #!/bin/bash function nginx_install(){ if [[ -f /usr/sbin/nginx ]]; then echo 'Nginx has been in ...

  10. Nginx反向代理的简单实现

    1)nginx的反向代理:proxy_pass2)nginx的负载均衡:upstream 下面是nginx的反向代理和负载均衡的实例: 负载机:A机器:103.110.186.8/192.168.1. ...