jQuery实现表单动态添加与删除数据操作示例
2024-09-04 08:42:15
<!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <title>用户名注册</title> <script> $(document).ready( function () { $( "#button" ).click( function () { var name = $( "#yonghu" ).val(); var mima = $( "#mima" ).val(); var youxiang = $( "#youxiang" ).val(); var tr = "<tr><td>" + '<input type="checkbox">' + "</td><td>" + name + "</td><td>" + mima + "</td><td>" + youxiang + "</td><td>" + '<input type="button" value="删除">' + "</td></tr>" ; $( "#table" ).append(tr); $( ":button" ).click( function () { $( this ).parent().parent().remove(); }); }); }); </script> </head> <body> 用户:<input id= "yonghu" type= "text" > 密码:<input id= "mima" type= "password" > 邮箱:<input id= "youxiang" type= "text" > <input type= "submit" id= "button" value= "添加" > <table id= "table" border= "1ps" > <tr> <td><input type= "checkbox" ></td> <td>用户名</td> <td>密码</td> <td>邮箱</td> <td>操作</td> </tr> </table> </body> </html> |
运行结果:
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery form操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery表格(table)操作技巧汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
最新文章
- Apache rewrite
- 异步调试神器Slog,“从此告别看日志,清日志文件了”
- The 7 Stages Of Scaling Web Apps--reference
- 链表C++模板实现
- 表单数据校检方法 onsubmit()的使用?
- 使用iftop网络流量监控
- linux安装和配置 mysql、redis 过程中遇到的问题记录(转)
- 1726: [Usaco2006 Nov]Roadblocks第二短路
- 安卓APP测试容易忽略的地方
- 持续交付之软件包管理maven篇
- SaltStack配置管理和YAML
- 中国地图插件世界地图||jQuery矢量SVG地图插件JVectorMap
- 搭建WordPress 个人博客
- VC++ 字符串Dword、LPSTR、LPWSTR、LPCSTR、LPCWSTR、LPTSTR、LPCTSTR
- SSM工作流程的大致理解
- golang 爬虫
- 在浏览器中输入url回车之后会发生什么
- bzoj 1820 dp
- Java设计模式—桥梁模式
- ios开发-获取手机相关信息