动态表格案例

最新推荐文章于 2022-04-09 22:44:29 发布

Bryce_Huang

最新推荐文章于 2022-04-09 22:44:29 发布

阅读量516

点赞数 1

文章标签： HTML JavaScrip DOM 动态表

本文链接：https://blog.csdn.net/H1517043456/article/details/88370614

版权

这篇博客记录了作者在学习Javaweb过程中，使用JavaScript和DOM操作实现动态表格的案例。通过创建、添加和删除节点对象，实现了表格的动态增删功能。在实践中遇到并解决了getElementsByTagName()使用不当导致的错误，强调了理解HTML元素间的树状结构的重要性。

摘要由CSDN通过智能技术生成

这几天学习了Javaweb的一些知识。由于是初学Javaweb，所以从HTML一点点开始学习的，自学好几天终于学到了JavaScript，而今天也用刚学到了标签对象方法的内容，便用这个做了一个动态表格。其实这个做起来挺简单，步骤也比较固定。不过自己在做的过程中还是遇到了几个问题，在网页上看了许久都没看到错在那里，网上去查也没找到。后来终于看到了问题所在，于是写在博客中以此提醒自己。

这是我在学习DOM标签对象方法时对于如何实现创建添加节点对象，插入节点对象，删除节点对象的部分笔记：

添加：

document.createElements("标签名"); 创建节点对象

setAttribute("name","value");设置节点对象

插入：

appendChild("标签对象") ；添加子节点对象

insertBefore("新标签对象"，"指定标签对象") 在指定的对象前面添加子节点对象

删除：

removeChild("标签对象"); 删除子节点

常用的基本步骤：

1）创建一个对象

2）设置属性

3)在HTML页面中插入这个新建的对象

这次的动态表格案例，是属于DOM编程中的标签对象的方法的使用案例。实现动态表格的重点在于如何动态的增加和删除表格。

增加的基本代码：

    function addbtn() {

        //创建一个按钮
            // 1，创建一个input对象
            var input = document.createElement("input");
            //2，设置属性
            input.setAttribute("type","button");
            input.setAttribute("value","新按钮");

        //得到body对象
        var