jQuery 动态添加表格

本是古典何须时尚 2023-10-06 22:14 39阅读 0赞

#### 阅读目录 ####

*  预览
 *  源码

## 预览 ##

![在这里插入图片描述][1e903e3fce484c4393bbcb3ceebf34e2.gif_pic_center]

## 源码 ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(function () {
          
    
            //提交按钮事件
            $("#submit").click(function () {
          
                var tr = $("<tr>");
                tr.append($("<td>").html($("#name").val()));
                tr.append($("<td>").html($("#email").val()));
                tr.append($("<td>").html($("#salary").val()));
    
                btn_del = $("<input type=button value='Delete'/>   ");
    
                btn_del.click(function () {
          
                    $(this).parent().remove();
                })
    
                tr.append(btn_del);
                $("#table").append(tr);
    
            })
    
        })
    </script>
    </head>
    
    <body>
    
    <div id="div1" align="center">
        <label style="vertical-align: middle">添加新员工</label><br>
        name:<input type="text" id="name">
        email:<input type="text" id="email">
        salary:<input type="text" id="salary"><br>
        <input type="button" value="submit" id="submit" align="center">
        <hr>
        <table border="1" width="800px" id="table">
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Salary</th>
                <th>Option</th>
            </tr>
        </table>
    </div>
    
    </body>
    </html>

[1e903e3fce484c4393bbcb3ceebf34e2.gif_pic_center]: https://img-blog.csdnimg.cn/1e903e3fce484c4393bbcb3ceebf34e2.gif#pic_center