Heim > Artikel > Web-Frontend > Detailliertes Beispiel dafür, wie jQuery die Funktionen zum Hinzufügen und Löschen von Benutzerinformationstabellen implementiert

Detailliertes Beispiel dafür, wie jQuery die Funktionen zum Hinzufügen und Löschen von Benutzerinformationstabellen implementiert

小云云Original: 2017-12-29 09:32:141524Durchsuche

In diesem Artikel wird hauptsächlich die Implementierung der Funktionen zum Hinzufügen und Löschen von Benutzerinformationstabellen vorgestellt. Der Code ist einfach und leicht zu verstehen, und Freunde, die ihn benötigen, können darauf verweisen allen helfen.

1. Browser-Schnittstelle

Eine einfache Benutzerinformationsoperation

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-Implementierung

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

Verwandte Empfehlungen :

Horizontales Aufteilungsschema für Benutzerinformationstabelle

Implementierung der Anzeigefunktion für Mitarbeiterinformationstabellen

jsp Die Seite Zeigt die Dateninformationstabelle der Datenbank an

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel dafür, wie jQuery die Funktionen zum Hinzufügen und Löschen von Benutzerinformationstabellen implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beispielfreigabe des von jQuery+vue.js implementierten Neun-Quadrat-PuzzlespielsNächster Artikel：Beispielfreigabe des von jQuery+vue.js implementierten Neun-Quadrat-Puzzlespiels

In Verbindung stehende Artikel

Mehr sehen