jquery動態添加表單數據

時間  2019-11-24
標籤 jquery 動態 添加 表單 數據 欄目 JQuery 简体版
原文   原文鏈接 
動態添加用戶
 
實現代碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!-- 引入jquery開發包 -->
<script type="text/javascript" src="js/jquery-1.12.3.js"></script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
$(function(){
    // 提交按鈕添加 click事件
    $("#addBtn").click(function(){
        
        // 獲取form的值
        var name = $("input[name='name']").val();
        var email = $("input[name='email']").val();
        var phone = $("input[name='phone']").val();
        
        // 在table 中生成tr 
        var tr = $("<tr><td>"+name+"</td><td>"+email+"</td><td>"+phone+"</td><td><a href='#' onclick='deleteItem(this);'>刪除</a></td></tr>");
        $("table").append(tr);
        
        // form重置，清除剛纔表單填寫的內容
        $("form")[0].reset();
    });
});

// 刪除
function deleteItem(a){
    // 刪除 a 元素所在行 
    $(a).parents("tr").remove();
}
</script>
</head>

<body>
    <div align="center">
        <h3>添加用戶</h3>
        <form>
            姓名 <input type="text" name="name" />
            郵箱 <input type="text" name="email" />
            電話 <input type="text" name="phone" /> <br/>
            <input type="button" value="提交" id="addBtn" />
        </form>
        <hr/> 
        <table border="1">
            <tr>
                <th>姓名</th>
                <th>email</th>
                <th>電話</th>
                <th>刪除</th>
            </tr>
        </table>
    </div>
</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程