JS实现动态表格（增删操作）——DOM模型的增删

最新推荐文章于 2022-02-03 19:50:50 发布

缺氧何甘酸

最新推荐文章于 2022-02-03 19:50:50 发布

阅读量492

点赞数

文章标签： javascript css dom 1024程序员节

本文链接：https://blog.csdn.net/m0_46113894/article/details/109265663

版权

本文介绍如何使用JavaScript实现动态表格的增删功能。通过操作DOM模型，利用table.rows.length获取表格行数，并在循环中注意索引避免数组越界。调试时可用alert辅助定位，动态添加节点可直接使用+=操作。点击a标签执行函数时，可设置οnclick与href=“javascript:void(0);”防止页面跳转。

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

JS实现动态表格（增删操作）——DOM模型的增删

table.rows返回的是对象，若要用长度还要.length
table.rows .length返回的是长度，for循环时记得要-1（打死都要记得）
调试的时候可以加一句alert判断执行到哪一步，如果数组出现undefined的可能是数组越界
为整个组件添加节点可以直接+=“”
对a标签的点击操作可以加在标签体内οnclick=“函数名（）”
如果对a标签的点击进行操作加上href=“javascript:void(0);” 表示不会跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
    form{
        text-align: center;
        margin: 30px auto 5px;
    }
    #but{
        color: white;
        background: #01a1ff;
    }
    table{
        margin: 30px auto 5px;
        border: black 1px solid ;
        border-collapse: collapse;
    }
    input{
        border-radius: 8px;