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>