jQuery简单实现将表单输入的内容动态添加到表格中

最新推荐文章于 2021-10-04 17:35:25 发布

香妹儿

最新推荐文章于 2021-10-04 17:35:25 发布

阅读量5.9k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端生涯文章标签： append jquery

本文链接：https://blog.youkuaiyun.com/qq_43553184/article/details/84989648

前端生涯专栏收录该内容

11 篇文章

订阅专栏

这篇博客介绍了如何利用jQuery实现将表单输入的用户名和密码动态添加到表格中，并提供删除操作。通过监听表单提交和按钮点击事件，创建新的表格行并附加删除链接。同时，提供了两种不同的实现方式，一种是通过事件委托处理删除，另一种是为每个添加的行绑定删除按钮的点击事件。

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

HTML代码：

<body>
       <form onsubmit="return addUser()">
           usename:<input id="i1" type="text" /><br /> password:
           <input id="i2" type="password" /><br />
           <input id="i3" type="button" value="submit" />
       </form>
       <hr />
       <table border="1px" id="i4">
           <tr>
               <th>usename</td>
                   <th>password</td>
                       <th>操作</td>
           </tr>
       </table>
   </body>

js代码：

方法一：

//用变量接收需要添加到table中的内容
                   var x = $("<tr><td>" + use + "</td><td>" + pass + "</td><td><a href='' class='a'>删除</a></td></tr>");
                   $("#i4").append(x); //将变量x添加到id为i4的标签中
                   $(".a").click(function() { 点击 class='a' 的标签触发的事件
                       $(this).parent().parent().remove(); //parent()方法是找到备选元素的直接父元素
                   });
               });
           });
       </script>

方法二：