zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    jQuery插件开发——全屏切换插件
    原生JS实现全屏切换以及导航栏滑动隐藏及显示——修改
    CSS 3学习——animation动画
    CSS 3学习——transition 过渡
    CSS 3 学习——transform 3D转换渲染
    CSS 3学习——transform 2D转换
    消息过滤
    jms消息组成
    vim常用命令整理
    知识碎片
  • 原文地址:https://www.cnblogs.com/mr-wuxiansheng/p/6415726.html
Copyright © 2011-2022 走看看