DOM操作表格——HTML DOM
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的更多相关文章
- Javascript高级编程学习笔记(45)——DOM 操作表格及DOM动态集合
操作DOM表格 早些时候,HTML 还是以表格布局为主, 所以DOM操作表格是比较重要的一点 但是现如今 有其它的选择,所以表格的操作也就慢慢地淡出了人们的视线 所以这里也就不过多去详细展开,这里也就 ...
- DOM操作表格
前面的话 表格table元素是HTML中最复杂的结构之一.要想创建表格,一般都必须涉及表示表格行.单元格.表头等方面的标签.由于涉及的标签多,因而使用核心DOM方法创建和修改表格往往都免不了要编写大量 ...
- DOM系列---DOM操作表格
DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本篇章主要了解一下DOM操作表格. 一.操作表格 <table>标签是H ...
- 第一百一十五节,JavaScript,DOM操作表格
JavaScript,DOM操作表格 学习要点: 1.操作表格 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DO ...
- JavaScript(第二十天)【DOM操作表格及样式】
DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DOM操作表格和样式的一些知识. 一.操作表格 <table& ...
- DOM操作--表格点击行变色
点击表格行变色,这种网页效果应该还是比较常见的.大家应该看见了,我这里的效果是用DOM操作实现的,那么很多人会问什么是DOM操作,贴出代码之前我就和大家解释一下什么是DOM操作: DOM是Docume ...
- DOM 操作表格
操作表格<table>标签是 HTML 中结构最为复杂的一个,我们可以通过 DOM 来创建生成它,或者 HTML DOM 来操作它.(PS:HTML DOM 提供了更加方便快捷的方式来操作 ...
- commonJS — DOM操作(for DOM)
for DOM github: https://github.com/laixiangran/commonJS/blob/master/src/forDOM.js 代码 /** * Created b ...
- js dom操作选择器,dom操作复习
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Struts2标签遍历List<Map<String,String>>
<s:if test="resultList != null && resultList.size() > 0"> <s:iterator ...
- EntityFrameWork分页
EF分页代码 using System; using System.Collections.Generic; using System.Linq; using System.Web; using Sy ...
- 利用Selenium和Browsermob批量嗅探下载Bilibili网站视频
Rerence: http://www.liuhao.me/2016/09/20/selenium_browsermob_sniff_bilibili_video/ 日常生活中,用电脑看视频是非常频繁 ...
- OpenSceneGraph几个重要功能节点练习
OpenSceneGraph几个重要功能节点练习 一. 空间变换节点 空间变换中最重要的是坐标系和矩阵运算了.OSG坐标系中使用右手系,Z轴垂直向上,X轴水平向右,Y轴垂直屏幕向里,与OpenGL和D ...
- 按住ctrl键可以在新窗口打开图片
用firebug查看网页时,img标签(或background属性里面的url地址源)里面的图片源按住ctrl键可以弹出新窗口显示,并可右键另存为到本地目录
- Tsinsen A1333: 矩阵乘法(整体二分)
http://www.tsinsen.com/A1333 题意:-- 思路:和之前的第k小几乎一样,只不过把一维BIT换成二维BIT而已.注意二维BIT写法QAQ #include <cstdi ...
- 日历视图(CalendarView)组件的功能和用法
日历视图(CalendarView)可用于显示和选择日期,用户既可选择一个日期,也可通过触摸来滚动日历.如果希望监控该组件的日历改变,可调用CalendarView的setOnDateChangeLi ...
- Oracle11G 在线重定义
create tablespace tbs1 datafile '/opt/oracle/oradata/haier/tbs1.dbf' size 500m autoextend on maxsize ...
- MyBatis 使用foreach与其他方式的时候参数传递方式
Mapper文件: <select id="selectPersonByIds" parameterType="map" resultMap=" ...
- Memcached在windows下的安装和使用
1.下载memcached安装文件及c#开发所需的dll 2.解压<memcached-1.2.6-win32-bin.zip>,并cmd,定位到解压目录. 3.安装服务:输入命令 mem ...