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集合的给定位置上插入一个新的单元格。
//创建table

var table = document.createElement("table");

table.border = 1;

table.width = "100%";

//创建tbody

var tbody = document.createElement("tbody");

table.appendChild(tbody);

//创建第一行

tbody.insertRow(0);

tbody.rows[0].insertCell(0);

tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1"));

tbody.rows[0].insertCell(1);

tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1"));

//创建第二行

tbody.insertRow(1);

tbody.rows[1].insertCell(0);

tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2"));

tbody.rows[1].insertCell(1);

tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2"));

//将表格添加到文档主体中

document.body.appendChild(table);

表格隔行变色实例：

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>隔行变色</title>

<script>

window.onload=function ()

{

    var oTab=document.getElementById('tab1');

    var oldColor='';  //用于保存原本的颜色

    for(var i=0;i<oTab.tBodies[0].rows.length;i++)

    {

        //鼠标经过变色

        oTab.tBodies[0].rows[i].onmouseover=function ()

        {

            oldColor=this.style.background;  //获取原本的颜色

            this.style.background='green';

        };

        oTab.tBodies[0].rows[i].onmouseout=function ()

        {

            this.style.background=oldColor;

        };

        //隔行变色设置

        if(i%2)

        {

            oTab.tBodies[0].rows[i].style.background='';

        }

        else

        {

            oTab.tBodies[0].rows[i].style.background='#CCC';

        }

    }

};

</script>

</head>

<body>

<table id="tab1" border="1" width="500">

    <thead>

        <td>ID</td>

        <td>姓名</td>

        <td>年龄</td>

    </thead>

    <tbody>

        <tr>

            <td>1</td>

            <td>Blue</td>

            <td>27</td>

        </tr>

        <tr>

            <td>2</td>

            <td>张三</td>

            <td>23</td>

        </tr>

        <tr>

            <td>3</td>

            <td>李四</td>

            <td>28</td>

        </tr>

        <tr>

            <td>4</td>

            <td>王五</td>

            <td>25</td>

        </tr>

        <tr>

            <td>5</td>

            <td>张伟</td>

            <td>24</td>

        </tr>

    </tbody>

</table>

</body>

</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. 类似Visual Studio一样，使用Qt Creator管理多个项目，创建子项目

    1. 简介 QtCreator是一个十分好用的跨平台IDE,由于最近需要在Windows和Mac同时写一个C++的代码,使用VS和XCode不能实现项目的统一管理(可以使用cmake来组织源码,但是每 ...

  2. 百度云受邀成为 LF Edge 创始成员

    导读 1月24日,Linux Foundation(Linux基金会,以下简称LF)宣布正式成立旗下子机构边缘计算基金会LF Edge,旨在建立边缘计算统一开源框架.百度云受邀成为创始成员. 中国公司 ...

  3. PAT A1141 PAT Ranking of Institutions （25 分）——排序，结构体初始化

    After each PAT, the PAT Center will announce the ranking of institutions based on their students' pe ...

  4. qt 程序中执行额外程序和脚本

    1.最简单的,我们可以通过system直接启动一个应用程序或者脚本:(但是要调用 #include <stdlib.h>) system("./helloworld") ...

  5. python：利用smtplib模块发送邮件

    自动化测试中,测试报告一般都需要发送给相关的人员,比较有效的一个方法是每次执行完测试用例后,将测试报告(HTML.截图.附件)通过邮件方式发送. 参考代码:send_mail.py 一.python对 ...

  6. C. Report

    题意:给出n个无序的数以及m个操作,每个操作由两个数组成,第一个数是操作的方式,第二个数 i 是操作的范围,若第一个数是1,则给 1-i 个数按升序排序,若第二个数是2,则给 1-i 个数按降序排列. ...

  7. kubespray -- k8s集群dashboard 访问方式

    1.参考这篇文章: https://github.com/kubernetes/dashboard/wiki/Creating-sample-user 创建用户 2.获取token 3.kubectl ...

  8. ARM架构相关学习归纳总结

    ARM作为一个生态不仅提供了CPU Core,还提供了一系列相关的IP,比如GIC.MMU.AMBA.CoreLink.CoreSight.Mali等等. 其他还包括Debug工具.开发工具.IDE等 ...

  9. virtualbox - 2台虚拟机之间通过ssh互访

    virtualbox 5.2.12 一台虚拟机是Debian 9,另一台是Ubuntu 18.04. 注意: 2台虚拟机系统里要安装ssh ! sudo apt install ssh 然后在virt ...

  10. 反射反射，程序员的快乐+反射案例：打印和Excel导出

    还是那几句话: 学无止境,精益求精 十年河东,十年河西,莫欺少年穷 学历代表你的过去,能力代表你的现在,学习代表你的将来 看过设计模式的童鞋都知道:反射反射,程序员的快乐!今天我们就利用反射来制作打印 ...