节点树简单操作

1. 内容描述：对表格内容进行增、删、改、查。

2. 主要方法：利用节点树，JS-DOM中的库函数,并且会画节点树。

3. 流程描述

  1.先创建一个1行4列的表格，并且有3个事件按钮和一个文本框
  2.通过增加按钮添加内容，填写相关内容
  3.在文本框内输入自己想要查找的内容，点击按钮进行查找
  4.也可以进行所有内容进行查找
  5.在文本所在栏进行修改内容，或者进行删除

4.重点剖析

1. 常见的类型节点

  ELEMENT_NODE 用 Document.createElement('elementName'); 创建
  TEXT_NODE 可使用 Document.createTextNode('Text Value'); 创建 

2.如何删除所在行和添加空的元素 (库函数)

  insertCell(index) 方法用于在 HTML 表的一行的指定位置插入一个空的  <td> 元素
  cells 集合返回表格中所有单元格的一个数组
  deleteRow(index) 方法用于表格删除指定位置

3.标记所起的作用

  didshow 标记是控制添加内容的表单显示或隐藏的
  flag="save"表明是它直接插入一条记录
  flag="update"表明是直接修改已经插入的值

4.函数内容

   - onShow()  是表单显示或隐藏函数
   - insert_row() 在填写表单内容之后的提交按钮调用的函数
   - insert_save() 在flags="save",调用此函数，插入数据
   - insert_update() 在flags="update" 调用此函数，修改数据
   - deleteRow() 删除选定行的数据
   - refurbish_()在上面函数内需要调用此函数，重新刷新数据列表
   - update() 修改数据

为什么有两个函数是修改函数?这是增强用户体验的。updaet()在修改时，我们需要将之前的内容显示出来.再次提交时，insert_row()再次响应，使得表单内容值变空.

5.代码展示

https://github.com/YKKKY/JS-DOM/blob/master/table.html

运行结果.jpg

欢迎大家点评，指导出错误！！！