JavaScript Dom 案例-动态表格的添加和删除(一)

最新推荐文章于 2022-12-09 19:01:31 发布

OneTheRoad

最新推荐文章于 2022-12-09 19:01:31 发布

阅读量1.1k

点赞数 1

分类专栏： js 文章标签： javascript css java html

本文链接：https://blog.csdn.net/ontheroad1024/article/details/103590008

版权

本文通过一个JavaScript案例介绍了如何动态地添加和删除HTML表格内容，涉及Document、Node、Element和innerHTML等关键知识点。示例代码展示了在没有CSS和JavaScript介入时的静态页面效果，接着添加JS使其具有动态功能。点击按钮可以实现表格行的添加和删除，帮助读者深入理解DOM操作。

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

案例知识点关键字:
Document,Node,Element,innerHTML,onclick

基本代码如下,这是一个目前只有HTML和CSS的的页面效果:

在这里插入图片描述

代码如下:

Title

<table>
    <caption>信息表</caption>
    <tr>
        <th>ID</th>
        <th>名字</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    
    <tr>
        <td>1</td>
        <td>姚明</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>
    
    <tr>
        <td>2</td>
        <td>易建联</td>
        <td>男</td>
        <td><a href="javascript:void(0);"  onclick="delTr(this);">删除</a></td&