jQuery 动态添加表格

本是古典何须时尚 2023-10-06 22:14 31阅读 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

发表评论取消回复

表情：

评论列表（有 0 条评论，31人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery 动态添加表格

阅读目录预览源码预览 ![在这里插入图片描述][1e903e3fce484c4393bbcb3ceebf34e2.gif_pic_center]

本是古典何须时尚/ 2023年10月06日 22:14/ 0 赞/ 32 阅读

相关 jquery实现添加删除表格

css: <style> div { width: 500px; line-h

谁借莪１个温暖的怀抱￠/ 2022年09月14日 09:49/ 0 赞/ 208 阅读

相关用jQuery给表格添加样式

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

╰+攻爆jí腚メ/ 2022年07月28日 00:20/ 0 赞/ 222 阅读

相关 JavaScript动态添加/删除表格行

> 跟着廖雪峰的 [JS教程][JS] 初步学习了一下JavaScript，看到 DOM操作部分的时候，想着找个小例子实践，恰好项目页面对表格的操作较多，需要解决简单的 ta

刺骨的言语ヽ痛彻心扉/ 2022年07月13日 00:25/ 0 赞/ 379 阅读

相关 JavaScript动态向表格添加数据

利用javascript ，动态向表格中添加数据 1. 首先先写出表格的表头和主干部分 <table width="600" border="1" cellspa

朴灿烈づ我的快乐病毒、/ 2022年07月11日 11:23/ 0 赞/ 339 阅读

相关运用jQuery动态向html中添加表格元素

实现的功能是运用jQuery动态的向一个table中添加行元素，很简单，也不废话，直接上代码。 <!DOCTYPE html> <html lang="en"

快来打我*/ 2022年06月02日 20:35/ 0 赞/ 197 阅读

相关动态添加table tr td 表格

老规矩还是先看效果： ![70][] 样式有点丑，别在意外表 jsp 代码： <table border="1" style="width: 100%" bor

妖狐艹你老母/ 2022年05月09日 02:48/ 0 赞/ 271 阅读

相关 JS动态向表格添加数据

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="t

灰太狼/ 2022年04月15日 05:16/ 0 赞/ 487 阅读

相关 jquery动态添加元素和动态添加click事件

文章目录 1.动态追加HTML元素 2.获取HTML已有元素 3.静态元素添加点击事件

小咪咪/ 2022年03月07日 11:56/ 0 赞/ 1419 阅读

相关 jquery动态添加表格行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

淡淡的烟草味﹌/ 2021年06月24日 13:59/ 0 赞/ 563 阅读