html创建表格:

<table berder='1' width='300'>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<th>tzr</th>
<th>男</th>
<th>24</th>
</tr>
</tr>
</tbody> <tfoot>
<tr>
<th>结束</th>
</tr>
</tfoot>
</table>

  而利用DOM创建方法为:

window.onload=function(){
var table=document.createElement('table');
table.width=300;
table.border=1;
}

  利用appendChild()方法添加表格的thead、tr,th。如:

var thead=document.createElement('thead');
table.appendChild(thead);

  可以看出,使用DOM创建表格比较累。

  下面看看如何使用DOM获取表格数据:获取table第一个子节点caption的内容。

window.onload=function(){
var table=document.getElementByTagName('table')[0];
alert(table.children[0].innerHTML);
}

  所以,我们常使用HTML DOM。

  table.caption.innerHTML;

  table.caption.innerHTML='人员表';

  table.thead;

  table.tfoot;

  table.tBodies;   //返回tbody集合

  table.rows;    //所有tr集合

  table.tBodies[0].rows;   //主体tbody的tr集合

  table.tBodies[0].rows[1].cells[1].innerHTML;   //返回主体第二行第二个单元格的内容

  table.deleteCaption();

  table.deleteTHead();

  table.tBodies[0].deleteRow(0);    //删除主体第一行

  table.tBodies[0].rows[1].deleteCell(1);   //删除主体第二行第二个数据

  最后,我们可以简单快捷地创建一个表格。

  table.createCaption().innerHTML='人员表';

  var thead=table.createTHead();

  var tr=thead.insertRow(0);

  tr.insertCell(0).innerHTML='数据1';

  tr.insertCell(1).innerHTML='数据2';

  tr.insertCell(2).innerHTML='数据3';

  PS:在创建表格时,<table>,<tbody>,<th>没有特定的方法。

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

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

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

  2. DOM操作表格

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

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

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

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

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

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

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

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

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

  7. DOM 操作表格

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

  8. commonJS — DOM操作(for DOM)

    for DOM github: https://github.com/laixiangran/commonJS/blob/master/src/forDOM.js 代码 /** * Created b ...

  9. js dom操作选择器,dom操作复习

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Struts2标签遍历List<Map<String,String>>

    <s:if test="resultList != null && resultList.size() > 0"> <s:iterator  ...

  2. EntityFrameWork分页

    EF分页代码 using System; using System.Collections.Generic; using System.Linq; using System.Web; using Sy ...

  3. 利用Selenium和Browsermob批量嗅探下载Bilibili网站视频

    Rerence: http://www.liuhao.me/2016/09/20/selenium_browsermob_sniff_bilibili_video/ 日常生活中,用电脑看视频是非常频繁 ...

  4. OpenSceneGraph几个重要功能节点练习

    OpenSceneGraph几个重要功能节点练习 一. 空间变换节点 空间变换中最重要的是坐标系和矩阵运算了.OSG坐标系中使用右手系,Z轴垂直向上,X轴水平向右,Y轴垂直屏幕向里,与OpenGL和D ...

  5. 按住ctrl键可以在新窗口打开图片

    用firebug查看网页时,img标签(或background属性里面的url地址源)里面的图片源按住ctrl键可以弹出新窗口显示,并可右键另存为到本地目录

  6. Tsinsen A1333: 矩阵乘法(整体二分)

    http://www.tsinsen.com/A1333 题意:-- 思路:和之前的第k小几乎一样,只不过把一维BIT换成二维BIT而已.注意二维BIT写法QAQ #include <cstdi ...

  7. 日历视图(CalendarView)组件的功能和用法

    日历视图(CalendarView)可用于显示和选择日期,用户既可选择一个日期,也可通过触摸来滚动日历.如果希望监控该组件的日历改变,可调用CalendarView的setOnDateChangeLi ...

  8. Oracle11G 在线重定义

    create tablespace tbs1 datafile '/opt/oracle/oradata/haier/tbs1.dbf' size 500m autoextend on maxsize ...

  9. MyBatis 使用foreach与其他方式的时候参数传递方式

    Mapper文件: <select id="selectPersonByIds" parameterType="map" resultMap=" ...

  10. Memcached在windows下的安装和使用

    1.下载memcached安装文件及c#开发所需的dll 2.解压<memcached-1.2.6-win32-bin.zip>,并cmd,定位到解压目录. 3.安装服务:输入命令 mem ...