jQuery实现表单动态添加与删除数据操作示例

最新推荐文章于 2022-06-27 10:28:17 发布

weixin_30315723

最新推荐文章于 2022-06-27 10:28:17 发布

阅读量224

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhuyeshen/p/11433773.html

版权

 
         <!DOCTYPE html> 
        
         <html lang= 
         "en" 
         > 
        
         <head> 
        
         <meta charset= 
         "UTF-8" 
         > 
        
         <title>用户名注册</title> 
        
         <script src= 
         "http://libs.baidu.com/jquery/2.0.0/jquery.min.js" 
         ></script> 
        
         <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程序设计有所帮助。

转载于:https://www.cnblogs.com/zhuyeshen/p/11433773.html

weixin_30315723

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现表单动态添加与删除数据操作示例

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>用户名注册</title><script src="http://libs.baidu.com/jquery/2.0.0...
复制链接

扫一扫