美文网首页
动态表格的创建, 在输入框中输入内容后,点击保存则在表格末尾添加

动态表格的创建, 在输入框中输入内容后,点击保存则在表格末尾添加

作者: pride_ | 来源:发表于2018-08-22 00:08 被阅读0次

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

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

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

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

    第二步:点击部分

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

    创建节点:

    获取节点元素中的内容:

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

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

    最后添加(追加)节点

    效果图:

    相关文章

      网友评论

          本文标题:动态表格的创建, 在输入框中输入内容后,点击保存则在表格末尾添加

          本文链接:https://www.haomeiwen.com/subject/wagbbftx.html