jQuery實現表單動態添加與刪除數據操作示例

2019-11-19 13:34:11

字體：大中小

來源：轉載

供稿：網友

本文實例講述了jQuery實現表單動態添加與刪除數據操作。分享給大家供大家參考，具體如下：

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

運行結果：