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. (零 ) 天猫精灵接入Home Assistant-总说明

    天猫精灵设备管理 https://bbs.hassbian.com/tmall 自己的hass访问地址 http://[自己的IP或域名]:8123/states 自己的MQTT服务器访问 http: ...

  2. 拓扑优化中SIMP方法与水平集方法有何优缺点,水平集法变换到高维,不是更复杂了

    作者:周平章链接:https://www.zhihu.com/question/52008623/answer/187927508来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...

  3. rbac组件

    创建新项目 新建一个项目untitled,注意django 版本为1.11 修改models.py,增加2个表 from django.db import models class Classes(m ...

  4. 【Codeforces 1120C】Compress String

    Codeforces 1120 C 题意:给一个串\(S\),将这个串分成\(t_1..t_m\),如果\(t_i\)在\(t_1..t_{i-1}\)中作为子串出现过,那么这个的代价是\(b\),否 ...

  5. 高阶函数 - aop面向切面编程

    Function.prototype.before = function(beforefn) { var __self = this; return function() { beforefn.app ...

  6. Tensorflow[目录结构]

    1 - Tensorflow源码目录结构 基于2018年5月28日github的tensorflow源码,即1.8版本 第一层: tensorflow: 核心代码目录. third_party:第三方 ...

  7. jquery $.each()遍历json数组

    使用jQuery的$.each()方法来遍历一个数组对象 var json=[ {"id":"1","tagName":"appl ...

  8. 如何传递参数给ASP.NET Core的中间件(Middleware)

    问题描述 当我们在ASP.NET Core中定义和使用中间件(Middleware)的时候,有什么好的办法可以给中间件传参数吗? 解决方案 在ASP.NET Core项目中添加一个POCO类来传递参数 ...

  9. Luogu4219 BJOI2014 大融合 LCT

    传送门 题意:写一个数据结构,支持图上连边(保证图是森林)和询问一条边两端的连通块大小的乘积.$\text{点数.询问数} \leq 10^5$ 图上连边,$LCT$跑不掉 支持子树$size$有点麻 ...

  10. 从github checkout子文件夹

    1.将远程项目加载到指定目录:$git init; $git remote add -f origin url2.使用SparseCheckout模式:$git config core.sparsec ...