Home > Article > Web Front-end > How to use jQuery to add and delete user information tables

How to use jQuery to add and delete user information tables

一个新手Original: 2017-09-12 09:10:391544browse

1. Browser interface

2. HTML code

<body>
    <form name="userForm">
        <center>
            用户录入            <br />
            用户名:            <input id="username" name="username" type="text" size=15 />
            E-mail:            <input id="email" name="email" type="text" size=15 />
            电话:            <input id="tel" name="tel" type="text" size=15 />
            <input type="button" value="添加" id="btn_submit" />
            <input type="button" value="删除所有" id="btn_removeAll" />
        </center>
    </form>
    ----------------------------    <hr />
    <table border="1" align="center" cellpadding=0 cellspacing=0 width=400>
        <thead>
            <tr>
                <th>用户名</th>
                <th>E-mail</th>
                <th>电话</th>
                <th>操作</th>
            </tr>
        </thead>
        ----------------------------        <tbody id="userTbody">
            <tr>
                <td>乔峰</td>
                <td>qiao@163.com</td>
                <td>18212345678</td>
                <td>
                    <a href=&#39;#&#39; class=&#39;myClz&#39;>删除</a>
                </td>
            </tr>
        </tbody>
        ----------------------------    </table></body>

3. jQuery implementation

$(function () {
    $("#btn_submit").click(function () {
        // 获取用户输入的值
        var usernameVal = $("#username").val();        
        var emailVal = $("#email").val();        
        var telVal = $("#tel").val();       
        var tr = "<tr><td>" + usernameVal + "</td><td>" + emailVal
            + "</td><td>" + telVal
            + "</td><td><a href=&#39;#&#39; class=&#39;myClz&#39;>删除</a></td></tr>";
        $("#userTbody").append(tr);
    });    // 全部删除
    $("#btn_removeAll").click(function () {
        $("#userTbody").empty();
    });    //删除一行数据
    /*click只对本身页面有的元素有作用，对于后面新加的元素，不起作用
          $(".myClz").click(function() {
              console.log(123);
          });
     */
    /*选择id=userTbody元素下所有样式名含有myClz的标签,并添加click事件
     *当点击后,向上一级找到tr元素，然后删除
    */
    $(&#39;#userTbody&#39;).on(&#39;click&#39;, ".myClz", function () {
        $(this).closest(&#39;tr&#39;).remove();
    });
});

The above is the detailed content of How to use jQuery to add and delete user information tables. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：+,! in front of JavaScript functions Usage introductionNext article：+,! in front of JavaScript functions Usage introduction

See more

How to use jQuery to add and delete user information tables

1. Browser interface

2. HTML code

3. jQuery implementation

Related articles