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. ethereum/EIPs-1271 smart contract

    https://github.com/PhABC/EIPs/blob/is-valid-signature/EIPS/eip-1271.md Standard Signature Validation ...

  2. Oracle数据库查询优化（上百万级记录如何提高查询速度）

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引.2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索引 ...

  3. 理解socket.io(一)---相关的API

    理解socket.io(一)---相关的API 1. 什么是Socket.IO?Socket.IO是node.js的一个模块,它用于浏览器与服务端之间实时通信.它提供了服务器和客户端的组件,只需一个模 ...

  4. 【Codeforces 1120A】Diana and Liana

    Codeforces 1120 A 题意:给\(n\)个数\(a_1..a_n\),要从其中删去小于等于\(n-m\times k\)个数,使得将这个数组分成\(k\)个一段的序列时有至少一段满足以下 ...

  5. Android Universal Image Loader java.io.FileNotFoundException: http:/xxx/lxx/xxxx.jpg

    前段时间在使用ImageLoader异步加载服务端返回的图片时总是出现 java.io.FileNotFoundException: http://xxxx/l046/10046137034b1c0d ...

  6. SecureRandom

    我们知道,Random类中实现的随机算法是伪随机,也就是有规则的随机.在进行随机时,随机算法的起源数字称为种子数(seed),在种子数的基础上进行一定的变换,从而产生需要的随机数字. 相同种子数的Ra ...

  7. 苹果与Windows双系统时间不同步的解决办法

    步骤:打开C盘>Windows>System32,找到cmd.exe,右键以管理员的身份运行. Reg add HKLM\SYSTEM\CurrentControlSet\Control\ ...

  8. BZOJ3451 Normal 期望、点分治、NTT

    BZOJCH传送门 题目大意:给出一棵树,求对其进行随机点分治的复杂度期望 可以知道一个点的贡献就是其点分树上的深度,也就是这个点在点分树上的祖先数量+1. 根据期望的线性性,考虑一个点对\((x,y ...

  9. 学习angularjs的ng-hide和ng-disabled

    一,页面上有一个checkbox和一个文本框.切换checkbox能对文本框输入文本与否: <input type="checkbox" ng-model="ckS ...

  10. sql语句——行列互换

    SELECT 年份, SUM(case when 季度=1 then 销量 else 0 end) as 一季度, SUM(case when 季度=2 then 销量 else 0 end) as ...