前面的话

  表格table元素是HTML中最复杂的结构之一。要想创建表格,一般都必须涉及表示表格行、单元格、表头等方面的标签。由于涉及的标签多,因而使用核心DOM方法创建和修改表格往往都免不了要编写大量的代码。本文将详细介绍DOM操作表格的属性和方法

需求

  要通过DOM实现下列格式的表格结构

<table border = "1" width = "100%">
<tbody>
<tr>
<td>Cell 1,1</td>
<td>Cell 2,1</td>
</tr>
<tr>
<td>Cell 1,2</td>
<td>Cell 2,2</td>
</tr>
</tbody>
</table>

DOMcore

  如果通过DOMcore方法,则方法如下

//创建表格
var table = document.createElement("table");
table.border = "1";
table.width = "100%"; //创建tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody); //创建第一行
var row1 = document.createElement("tr");
tbody.appendChild(row1);
var cell1_1 = document.createElement("td");
cell1_1.appendChild(document.createTextNode("Cell 1,1"));
row1.appendChild(cell1_1);
var cell2_1 = document.createElement("td");
cell2_1.appendChild(document.createTextNode("Cell 2,1"));
row1.appendChild(cell2_1); //创建第二行
var row2 = document.createElement("tr");
tbody.appendChild(row2);
var cell1_2 = document.createElement("td");
cell1_2.appendChild(document.createTextNode("Cell 1,2"));
row2.appendChild(cell1_2);
var cell2_2 = document.createElement("td");
cell2_2.appendChild(document.createTextNode("Cell 2,2"));
row2.appendChild(cell2_2); //将表格添加到文档主体中
document.body.appendChild(table);

属性和方法

  显然DOM代码很长,为了方便构建表格,HTML DOM为<table>、<tbody>、<tr>元素添加了属性和方法。

【1】为<table>元素添加的属性和方法

caption:保存着对<caption>元素的指针
tBodies:是一个<tbody>元素的HTMLCollection
tFoot:保存着对<tfoot>元素的指针
tHead:保存着对<thead>元素的指针
createTHead():创建<thead>元素,将其放到表格中,返回引用
createTFoot():创建<tfoot>元素,将其放到表格中,返回引用
createCaption():创建<caption>元素,将其放到表格中,返回引用
deleteTHead():删除<thead>元素
deleteTFoot():删除<tfoot>元素
deleteCaption():删除<caption>元素

【2】为<tbody>元素添加的属性和方法

rows:保存着<tbody>元素中行的HTMLCollection
deleteRow(pos):删除指定位置的行
insertRow(pos):向rows集合中的指定位置插入一行,返回对新插入行的引用

【3】为<tr>元素添加的属性和方法

cells:保存着<tr>元素中单元格的HTMLCollection
deleteCell(pos):删除指定位置的单元格
insertCell(pos):向cells集合中的指定位置插入一个单元格,返回对新插入单元格的引用

代码重写

//创建表格
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);

效果展示

<script>
//创建表格
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);
</script>

DOM操作表格的更多相关文章

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

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

  2. 第一百一十五节,JavaScript,DOM操作表格

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

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

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

  4. Javascript高级编程学习笔记(45)——DOM 操作表格及DOM动态集合

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

  5. DOM操作--表格点击行变色

    点击表格行变色,这种网页效果应该还是比较常见的.大家应该看见了,我这里的效果是用DOM操作实现的,那么很多人会问什么是DOM操作,贴出代码之前我就和大家解释一下什么是DOM操作: DOM是Docume ...

  6. DOM 操作表格

    操作表格<table>标签是 HTML 中结构最为复杂的一个,我们可以通过 DOM 来创建生成它,或者 HTML DOM 来操作它.(PS:HTML DOM 提供了更加方便快捷的方式来操作 ...

  7. DOM操作表格——HTML DOM

    html创建表格: <table berder='1' width='300'> <thead> <tr> <th>姓名</th> < ...

  8. DOM拓展表格小练习

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

  9. JavaScript的DOM_操作表格

    一.使用HTML标签创建表格 thead.tfoot.caption标签在一个表格中只能有一个    tbody.tr.td.th标签在一个表格中可以有N个 <table border=&quo ...

随机推荐

  1. JDK6环境下升级项目到springframework4.x和tomcat7.x

    springframework 3.x升级到 4.x  1 xsi:schemaLocation 对应的3.x->4.x 2 pom  springframework <propertie ...

  2. 后台设置gridview不换行

    GridView1.Style.Add("word-break", "keep-all");            GridView1.Style.Add(&q ...

  3. 安装 SSL 证书

    http://www.itrus.cn/html/fuwuyuzhichi/fuwuqizhengshuanzhuangpeizhizhinan/

  4. inno 实现水波特效

    安装Inno Setup时如果选择了水波效果插件(如下图),将在Inno Setup的安装目录下自带有水波特效的例子,如路径:C:\Program Files (x86)\Inno Setup 5\E ...

  5. Atom.io设置ctrl+delete

    一般常见的text editor,在文本前面的空白处按下ctrl+delete,只是删除空白符到单词前面停下,但是Atom.io的默认设置,把空白符后遇到的第一个单词也删掉了.改配置方法是在keyma ...

  6. JAVA使用POI操作excel

    文中处理的excel是2003年以前的版本,使用HSSFworkbook,如果处理2007版本以后的excel,用XSSFworkbook,对于二者的兼容性问题,可参考 http://blog.csd ...

  7. java jinfo命令详解

    jinfo (configuration info): 功能:输出Java进程的系统信息与jvm参数. 摘要: jinfo [ option ] pid jinfo [ option ] execut ...

  8. 配置WCF同时支持WSDL和REST,swaggerwcf生成文档

    配置WCF同时支持WSDL和REST,SwaggerWCF生成文档 VS创建一个WCF工程,通过NuGet添加SwaggerWcf 创建完成后通过 程序包管理控制台 pm>Install-Pac ...

  9. 【Win10】UAP/UWP/通用 开发之 RelativePanel

    [Some information relates to pre-released product which may be substantially modified before it's co ...

  10. Java设计模式2:简单工厂模式

    简单工厂模式 简单工厂模式是类的创建模式,又叫做静态工厂方法模式.简单工厂模式由一个工厂对象决定生产出哪一种产品类的实例. 为什么要使用简单工厂模式 原因很简单:解耦. A对象如果要调用B对象,最简单 ...