通过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的更多相关文章

  1. jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用 DOM 操作节点,对页面中的表格实现增.删.查.改操作 点击"增加"超链接时,将表格中的第一条数据添加到表格的末尾 ...

  2. 在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的“删除”超链接

    查看本章节 查看作业目录 需求说明: 在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的"删除"超链接,使用 DOM 节点的删除操作将对应的 ...

  3. JS中的DOM操作和事件

    [DOM树节点] DOM节点分为三大类: 元素节点. 属性节点. 文本节点: 文本节点.属性节点属于元素节点的子节点.操作时,均需要先取到元素节点,再操作子节点:可以使用getElement系列方法, ...

  4. 第61节:Java中的DOM和Javascript技术

    Java中的DOM和Javascript技术 DOM是一门技术,是文档对象模型.所需的文档只有标记型文档,如我们所学的html文档(文档中的所有标签都封装成为对象了) DOM: 为Document O ...

  5. js如何实现动态在表格中添加标题和去掉标题?

    js如何实现动态在表格中添加标题和去掉标题? 一.总结 1.通过table标签的createCaption(),deleteCaption()方法实现. document.getElementById ...

  6. vue+Element 表格中的树形数据

    template部分   只在树形的结构中显示编辑与删除按钮 这里我只是简单的做了一个 v-if 判断在操作列中 ,判断是否存在级别这个字段 <div> <el-table :dat ...

  7. 借助JavaScript中的Dom属性改变Html中Table边框的颜色

    借助JavaScript中的Dom属性改变Html中Table边框的颜色 -------------------- <html> <head> <title>我是页 ...

  8. 如何用perl将表格中不同列的数据进行拼凑,然后将拼凑后的数据用“|”连接在一起

    最近写了一个perl脚本,实现的功能是将表格中其中两列的数据进行拼凑,然后将拼凑后的数据用“|”连接在一起. 表格内容如下: 员工号码 员工姓名 职位 入职日期 1001 张三 销售 1980/12/ ...

  9. C# 在excel表格中检索并导出数据

    由于工作需要,我经常使用excel文档来存储和处理各种数据,在生活中偶尔也会使用excel表格来记录各种开销,相信很多朋友也和我一样.Excel的功能很强大,其中一个很实用的数据处理功能就是查找和替换 ...

随机推荐

  1. SQL SERVER SELECT语句中加锁选项的详细说明

    共享锁(读锁)和排他锁(写锁)   共享锁(S锁):共享 (S) 用于不更改或不更新数据的操作(只读操作),如 SELECT 语句. 如果事务T对数据A加上共享锁后,则其他事务只能对A再加共享锁,不能 ...

  2. Linux怎样设置tomcat自启动

    --未验证 越来越多的人把tomcat部署在Linux下,但是linux下必须用命令才能启动tomcat,如果同一个服务器下tomcat部署几个的话,每次启动就很繁琐,能不能设置在linux系统启动时 ...

  3. 阶段5 3.微服务项目【学成在线】_day18 用户授权_14-细粒度授权-我的课程细粒度授权-需求分析

    3.3 我的课程细粒度授权 3.3.1 需求分析 1.我的课程查询,细粒度授权过程如下: 1)获取当前登录的用户Id 2)得到用户所属教育机构的Id 3)查询该教学机构下的课程信息 最终实现了用户只允 ...

  4. Ubuntu下搜狗拼音输入法打不出汉字的解决方法

    问题 (1)Ubuntu下,搜狗拼音输入法能启动(系统托盘处有图标),但是打不出汉字,打字时选框不正常. 或者 (2)Deepin下,搜狗输入法无法启动,托盘处不显示图标,fcitx运行正常(这个可以 ...

  5. 打开app应用

    =========================================人才网 <!--app底部浮动广告--><style> footer { padding-bo ...

  6. linux环境上报异常java.lang.NoSuchMethodError

    23-Apr-2019 18:11:35.545 INFO [http-nio-10052-exec-10] org.apache.catalina.core.ApplicationContext.l ...

  7. [转帖]从零开始入门 K8s:应用编排与管理:Job & DaemonSet

    从零开始入门 K8s:应用编排与管理:Job & DaemonSet https://www.infoq.cn/article/KceOuuS7somCYbfuykRG 陈显鹭 阅读数:193 ...

  8. [转帖]linux下查找文件及查找包含指定内容的文件常用命令。

    linux下查找文件及查找包含指定内容的文件常用命令. https://blog.csdn.net/yangyu19910407/article/details/18266821 最简单的查找 fin ...

  9. 从MongoDB及mysql 谈B/B+树

    一 B树的由来 B树指的是一类树,包括B-树,B+树,B*树等,是一种自平衡的搜索树,它类似普通的平衡二叉树,不同的一点是B树允许每个节点有更多的子节点.B树是专门为外部存储器设计的,如磁盘,它对于读 ...

  10. 如何用IDEA创建springboot(maven)并且整合mybatis连接mysql数据库和遇到的问题

    一.New->Project 二.点击next 三.在Group栏输入组织名,Artifact就是项目名.选择需要的java版本,点击next 四.添加需要的依赖 在这里我们也可以添加sql方面 ...