表格中的DOM
通过DOM来操作table跟在html中操作table是不一样的,下面来看看怎样通过DOM来操作table。
按照table的分布来创建:
<table>
<thead>
<tr>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
1.首先要先创建一个table
var table = document.createElement("table");
2.在table中添加thead
var thead = table.createTHead();
3.在thead中添加tr
var tr = thead.inserRow();
4.在tr中添加td(td无法添加th)
var td = tr.insertCell();
5.在table中添加tbody
var thead = table.createTHead();
6.在table中添加tfoot
var thead = table.createTHead();
7.返回包含当前所有单元格(td)的一个数组
tableObject.cells
8.返回包含表格中所有行(tr)的一个数组。
tableObject.rows
创建顺序为:
1.创建< table >元素
2.创建< table >的子元素< tbody >
3.使用一个循环来创建< tbody >的子元素< tr >
4.分别使用循环为每一个< tr >创建子元素< tb >
5.为每一个< tb >创建文本节点
创建完< table >,< tbody >,< tr >,< td >元素和文本节点,我们使用相反的顺序把它们分别添加到自己的父节点。
通过对象名.appendChild(table)添加到html中。通过DOM根创建table
删除分组:
通过table来直接删除
例:table.deleteRow(tr) -->表示删除某一行
注意:table无法删除tbody
删除单元格:deleteCell()
还有关于form的一些操作
首先先获取到DOM:
var form = document.forms[ ];可填i(下标);id;name
属性:1.elements : 获得form中所有的表单元素的集合;
例:var elem = form.element[ ] i;id;name
注意(name并不是每个表单都会写,若有name,则可简写为;
var elem = form.name)
2.length:获取表单元素个数
例:element.length
3.id 属性可设置或返回表单的 id
例:formObject.id=id
form的对象方法:
submit():手动提交;这里有一个提交前的自动触发事件(onsubmit)
reset():将form中的所有的输入元素重置为默认值;有一个重置之前调用的事件(onreset)
表格中的DOM的更多相关文章
- jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用 DOM 操作节点,对页面中的表格实现增.删.查.改操作 点击"增加"超链接时,将表格中的第一条数据添加到表格的末尾 ...
- 在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的“删除”超链接
查看本章节 查看作业目录 需求说明: 在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的"删除"超链接,使用 DOM 节点的删除操作将对应的 ...
- JS中的DOM操作和事件
[DOM树节点] DOM节点分为三大类: 元素节点. 属性节点. 文本节点: 文本节点.属性节点属于元素节点的子节点.操作时,均需要先取到元素节点,再操作子节点:可以使用getElement系列方法, ...
- 第61节:Java中的DOM和Javascript技术
Java中的DOM和Javascript技术 DOM是一门技术,是文档对象模型.所需的文档只有标记型文档,如我们所学的html文档(文档中的所有标签都封装成为对象了) DOM: 为Document O ...
- js如何实现动态在表格中添加标题和去掉标题?
js如何实现动态在表格中添加标题和去掉标题? 一.总结 1.通过table标签的createCaption(),deleteCaption()方法实现. document.getElementById ...
- vue+Element 表格中的树形数据
template部分 只在树形的结构中显示编辑与删除按钮 这里我只是简单的做了一个 v-if 判断在操作列中 ,判断是否存在级别这个字段 <div> <el-table :dat ...
- 借助JavaScript中的Dom属性改变Html中Table边框的颜色
借助JavaScript中的Dom属性改变Html中Table边框的颜色 -------------------- <html> <head> <title>我是页 ...
- 如何用perl将表格中不同列的数据进行拼凑,然后将拼凑后的数据用“|”连接在一起
最近写了一个perl脚本,实现的功能是将表格中其中两列的数据进行拼凑,然后将拼凑后的数据用“|”连接在一起. 表格内容如下: 员工号码 员工姓名 职位 入职日期 1001 张三 销售 1980/12/ ...
- C# 在excel表格中检索并导出数据
由于工作需要,我经常使用excel文档来存储和处理各种数据,在生活中偶尔也会使用excel表格来记录各种开销,相信很多朋友也和我一样.Excel的功能很强大,其中一个很实用的数据处理功能就是查找和替换 ...
随机推荐
- JDK&JRE
JDK是提供给Java开发人员使用的,其中包含了java的开发工具,也包括了JRE.所以安装了JDK,就不用在单独安装JRE了. 其中的开发工具:编译工具(javac.exe) 打包工具(jar.ex ...
- LeetCode_83. Remove Duplicates from Sorted List
83. Remove Duplicates from Sorted List Easy Given a sorted linked list, delete all duplicates such t ...
- MFC BASE64加解密 算法
unsigned char * base64 = (unsigned char *)"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz ...
- iOS面试题超全!
之前看了很多面试题,感觉要不是不够就是过于冗余,于是我将网上的一些面试题进行了删减和重排,现在分享给大家.(题目来源于网络,侵删) 1. Object-c的类可以多重继承么?可以实现多个接口么?Cat ...
- Egret入门学习日记 --- 第十八篇(书中 8.5~8.7 节 内容)
第十八篇(书中 8.5~8.7 节 内容) 其实语法篇,我感觉没必要写录入到日记里. 我也犹豫了好久,到底要不要录入. 这样,我先读一遍语法篇的所有内容,我觉得值得留下的,我就录入日记里. 不然像昨天 ...
- 做了一个非竞价排名、有较详细信息的程序员职位 match 网站
作为一个程序员,每次看机会当我去 BOSS 直聘 或者拉勾网进行搜索时,返回的顺序并不是根据匹配程度,而是这些公司给 BOSS 直聘或者拉勾网付了多少钱.这种百度式的竞价排名机制并没有把我做为求职者的 ...
- MATLAB知识-解决因缺少libsvm 而运行出现Y must be a vector or a character array.
matlab版本R2014b 最近运行一个使用svmtrain的程序,出现以下错误: 这是因为是在设定路径里面没有libsvm.辛亏有一位师姐的电脑里面有libsvm的包,我直接用了,这样就不需要下载 ...
- Ctrl + 逗号快捷键被占用[搜狗输入法]
Ctrl+,(或者Ctrl+逗号)被占用. 快捷键忽然不能用了,只要一用快捷键自动唤醒搜狗输入法,呵呵.极度影响使用. 就说怎么禁掉吧: 其他快捷键禁用参考 参考: 搜狗桌面论坛 注:搜狗输入法一次占 ...
- 2、head 标签学习
5秒自动刷新 <meta http-equiv="refresh" content="5,url:http://www.baidu.com" /> ...
- SQLSever--基础学习--创建登录用户&创建数据库用户&分配权限
如题,本文简记一下SQL Sever里面登录用户(login)的创建,数据库用户(DBUser)的创建,以及给数据库用户分配权限(Grant). 数据库有三层保护机制: 第一层:登录用户以及登录密码的 ...