JavaScript——动态增删表格

有空再写

于 2020-10-03 16:32:18 发布

阅读量276

点赞数

文章标签： javascript html css

本文链接：https://blog.youkuaiyun.com/weixin_43305674/article/details/108911109

版权

这篇博客介绍了如何使用JavaScript操作DOM动态添加和删除表格行，涉及的方法包括getElementById、appendChild、setAttribute、createTextNode以及removeChild。通过示例代码和运行结果，展示了在输入内容后点击添加按钮以及使用innerHTML方法进行表格操作的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要使用document.getElemetById()、obj.appendChild()、obj.setAttribute()、document.createTextNode()、table.removeChild()等方法，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
    <style>
        table{
            text-align: center;
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" id="id" placeholder="请输入编号">
        <input type="text" id="name" placeholder="请输入姓名">
        <input type="text" id="gender" placeholder="请输入性别">
        <input type="button" id="btn_add" value="添加" >
    </div>

    <table>
        <caption>第七小队</caption>
        <tr>
            <th>编号</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>
        </tr>

        <tr>
            <td>3</td>
            <td>宇智波佐助</td>
            <td>男</td>