动态表格的创建, 在输入框中输入内容后,点击保存则在表格末尾添加一条记录, 点击删除则会删除对应行的记录

首先将基本的DOM内容写出,再进行JS的相关操作


HTML与CSS样式内容写完后,我们来写js内容,如果要将js内容写在<head>中首先要运用window.onload = function().

第一步:获取HTML中的input内容;


其中先获取input标签中的所有元素,由于getElementByTagName返回的是一个数组,所有可通过下标来获取每个input中的对应元素。

第二步:点击部分

由于在获取元素中保存按钮变量名为inpBc,所有用inpBc进行点击触发


创建节点:


获取节点元素中的内容:


由于我们有一个功能是删除,所以将删除功能单独描写


在表格最后一个添加一个<a>标签;进行删除功能的操作以及点击删除今儿删除行,其中this.parentNode.parentNode是删除父节点的父节点,也就是说删除td和对应的tr

最后添加(追加)节点


效果图:


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,686评论 1 92
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 7,741评论 0 8
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,040评论 3 119
  • 早上8:00多起床,跟文件还有子永道别之后,送玉琼去了火车站。订好了票,但是送去之后,玉琼说还是晚点了,还好去她那...
    陈琦不黑阅读 2,682评论 4 3
  • 远处的小山坡上,住着一个老爷爷,和一个老奶奶。 老奶奶的头发已经全白了,脸上是深深浅浅的皱纹,但老爷爷说她好看,就...
    落了小心思的灯阅读 2,695评论 0 0