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

时间 2020-05-22

原文原文链接

 
        <!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>

运行结果：html

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery form操做技巧汇总》、《jQuery操做json数据技巧汇总》、《jQuery经常使用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery表格(table)操做技巧汇总》及《jquery选择器用法总结》jquery

但愿本文所述对你们jQuery程序设计有所帮助。json