Detailed example of how jQuery implements the adding and deleting functions of user information tables-JS Tutorial-php.cn

Detailed example of how jQuery implements the adding and deleting functions of user information tables

小云云

Release： 2017-12-29 09:32:14

Original

1564 people have browsed it

This article mainly introduces jQuery to implement the adding and deleting functions of user information tables. The code is simple and easy to understand, very good, and has reference value. Friends in need can refer to it. I hope it can help everyone.

1. Browser interface

Detailed example of how jQuery implements the adding and deleting functions of user information tables

A simple user information operation

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>

Copy after login

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

Copy after login

Related recommendations:

Horizontal table splitting scheme for user information table

Realize employee information table display function

jsp page displays the database Data information table

The above is the detailed content of Detailed example of how jQuery implements the adding and deleting functions of user information tables. For more information, please follow other related articles on the PHP Chinese website!