cari

Rumah >hujung hadapan web >tutorial js >如何用jQuery实现用户信息表格的添加、删除

如何用jQuery实现用户信息表格的添加、删除

一个新手
一个新手asal
2017-09-12 09:10:391591semak imbas


1、浏览器界面

一个简单的用户信息操作

2、html代码

<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实现

$(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();
    });
});

Atas ialah kandungan terperinci 如何用jQuery实现用户信息表格的添加、删除 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JavaScript函数前面的+，！用法介绍Artikel seterusnya：如何搭建JSP开发环境

Artikel berkaitan

Lihat lagi