1. 内容描述:对表格内容进行增、删、改、查。
2. 主要方法:利用节点树,JS-DOM中的库函数,并且会画节点树。
3. 流程描述
1.先创建一个1行4列的表格,并且有3个事件按钮和一个文本框
2.通过增加按钮添加内容,填写相关内容
3.在文本框内输入自己想要查找的内容,点击按钮进行查找
4.也可以进行所有内容进行查找
5.在文本所在栏进行修改内容,或者进行删除
4.重点剖析
- 常见的类型节点
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.代码展示
欢迎大家点评,指导出错误!!!