点评：这篇文章主要介绍了dom操作表格示例(dom创建表格),需要的朋友可以参考下

一、使用HTML标签创建表格：

代码如下:

人员表

姓名

性别

年龄

张三

男

20

李四

女

22

合计：N

thead、tfoot、caption标签在一个表格中只能有一个tbody、tr、td、th标签在一个表格中可以有N个

二、使用DOM创建表格

标签是HTML中结构最为复杂的一个，我们可以通过DOM来创建生成它，或者HTMLDOM来操作它。(HTMLDOM提供了更加方便快捷的方式来操作HTML)

代码如下:

三、使用DOM获取表格数据（使用DOM操作表格会很烦）

代码如下:

window.onload=function(){

vartable=document.getElementsByTagName("table")[0];

alert(table.children[0].innerHTML);

};

四、使用HTMLDOM来获取表格数据（方便，简单，清晰）。

因为表格较为繁杂，层次也多，在使用之前所学习的DOM只是来获取某个元素会非常难受，所以使用HTMLDOM会清晰很多。

代码如下:

window.onload=function(){

//使用HTMLDOM来获取表格元素

vartable=document.getElementsByTagName('table')[0];//获取table引用

//按HTMLDOM来获取表格的

、

alert(table.tHead);//获取表头

alert(table.tFoot);//获取表尾

//按HTMLDOM来获取表体

alert(table.tBodies);//获取表体的集合

};

在一个表格中

和是唯一的，只能有一个。而不是唯一的可以有多个，这样导致最后返回的和是元素引用，而返回的是元素集合。

代码如下:

window.onload=function(){

//使用HTMLDOM来获取表格元素

vartable=document.getElementsByTagName('table')[0];//获取table引用

//按HTMLDOM来获取表格的行数

alert(table.rows.length);//获取行数的集合，数量

//按HTMLDOM来获取表格主体里的行数

alert(table.tBodies[0].rows.length);//获取主体的行数的集合，数量

};

代码如下:

window.onload=function(){

//使用HTMLDOM来获取表格元素

vartable=document.getElementsByTagName('table')[0];//获取table引用

//按HTMLDOM来获取表格主体内第一行的单元格数量(tr)

alert(table.tBodies[0].rows[0].cells.length);//获取第一行单元格的数量

};

代码如下:

window.onload=function(){

//使用HTMLDOM来获取表格元素

vartable=document.getElementsByTagName('table')[0];//获取table引用

//按HTMLDOM来获取表格主体内第一行第一个单元格的内容(td)

alert(table.tBodies[0].rows[0].cells[0].innerHTML);//获取第一行第一个单元格的内容

};

代码如下:

五、HTMLDOM创建表格

代码如下:

window.onload=function(){

//按HTMLDOM创建一个表格

vartable=document.createElement('table');

table.border=1;

table.width=300;

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

//table.createTHead();

//table.tHead.insertRow(0);

varthead=table.createTHead();//该方法返回一个引用

vartr=thead.insertRow(0);//该方法返回一个引用

vartd=tr.insertCell(0);

//td.appendChild(document.createTextNode('数据'));//添加数据的一种方式，还可以使用下面种方式

td.innerHTML="数据";

vartd2=tr.insertCell(1);

//td2.appendChild(document.createTextNode('数据2'));

td2.innerHTML="数据2";

document.body.appendChild(table);

};在创建表格的时候

alert(table.caption.innerHTML);//获取caption的内容

//table.caption.innerHTML="学生表";//还可以设置值

};

代码如下:

window.onload=function(){

//使用HTMLDOM来获取表格元素

vartable=document.getElementsByTagName('table')[0];//获取table引用

//按HTMLDOM来获取表头表尾

、、

没有特定的方法，需要使用document来创建。也可以模拟已有的方法编写特定的函数即可，例如：insertTH()之类的。 更多信息请查看IT技术专栏 更多信息请查看 网页制作 【点此处就本文及相关问题在本站进行非正式的简要咨询（便捷快速）】 【点此处查询各地各类考试咨询QQ号码及交流群】 上一篇： html动态加载css样式和js脚本示例 下一篇： html元素遮挡flash详解示例 手机网站地址： dom操作表格示例(dom创建表格) 由于各方面情况的不断调整与变化， 提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！ 相关阅读 网页制作 使用CSS制作立体导航栏 10月30日 用纯CSS3实现网页中常见的小箭头 10月30日 有关HTML5中背景音乐的自动播放功能 10月30日 HTML5、Select下拉框右边加图标的实现代码(增进用户体验) 10月30日 html5实现图片转圈的动画效果——让页面动起来 10月30日 html5清空画布方法(三种) 10月30日 HTML实现移动端固定悬浮半透明搜索框 10月30日 HTML5 文件域+FileReader 分段读取文件并上传到服务器 10月30日 Dreamweaver怎么设计彩色边框的表格? 10月30日 Dreamweaver怎么给个人简历添加照片并排版? 10月30日 基于HTML5的WebGL实现json和echarts图表展现在同一个界面 10月30日 解决HTML5手机端页面缩放的问题 10月30日 利用纯CSS实现居中的七大方法示例 09月29日 CSS3中伪元素::before和::after的用法示例 09月29日 详解使用 CSS 的 font-size-adjust 属性改善网页排版 09月29日 HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO) 09月29日 css3 pointer-events 介绍详解 09月29日 CSS :focus-within的具体使用 09月29日 你所不知道的 CSS 动画技巧与细节 09月29日 详解CSS3选择器:nth-child和:nth-of-type之间的差异 09月29日 移动网站 2025国考·省考课程试听报名 报班类型请选择报班类型网课班299全年巅峰班16800全年通关班16800联报班12800省考笔试全程班7800省考笔试+面试班9800省考笔试+事业单位笔试9800省考基础班4980 姓名 手机号 验证码 最新信息 2025年迪庆州德钦县特聘农技员招募公告 2025年云南众成人才派遣有限责任公司招聘劳务派遣人员公告 2025年中国能源建设集团云南省电力设计院有限公司春季招聘公告 2025年中国煤炭地质总局招聘公告 2025年中和农信农业集团有限公司宾川分公司招聘启事 2025年临沧市水利水电勘测设计研究院有限公司劳务派遣人员招录公告 2025年四川中烟工业有限责任公司博士研究生招聘公告 2025年云南人力资源开发有限责任公司招聘笔试成绩及进入面试事宜公告 2025年四川中烟工业有限责任公司员工招聘公告 2025年昭通市威信县公安局警务辅助人员招聘通告 公考类 云南公务员 贵州公务员 四川公务员 广西公务员 各省公务员 国家公务员 选调遴选 招聘类 188app金宝搏 特岗教师 三支一扶 志 愿 者 银行招聘 国企招聘 各类考试 学历升学 职业资格 外语考试 医学考试 工程考试 教师资格 关于我们| 联系我们| 人才招聘| 网站声明| 网站帮助| 非正式的简要咨询| 简要咨询须知| 新媒体/短视频平台| 手机站点| 投诉建议 工业和信息化部备案号：滇ICP备2023014141号-1 云南省教育厅备案号：云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证：（云）人服证字（2023）第0102001523号 联系电话：0871-65099533/13759567129 获取招聘考试信息及咨询关注公众号： 咨询QQ：1093837350（9:00—18:00） 版权所有: map