suchen

Heim >Web-Frontend >js-Tutorial >Detailliertes Beispiel dafür, wie jQuery das einfache dynamische Hinzufügen und Löschen von Tabellen implementiert

Detailliertes Beispiel dafür, wie jQuery das einfache dynamische Hinzufügen und Löschen von Tabellen implementiert

小云云
小云云Original
2017-12-27 11:46:182871Durchsuche

In diesem Artikel werden hauptsächlich die von jQuery implementierten einfachen dynamischen Funktionen zum Hinzufügen und Löschen von Tabellen vorgestellt, einschließlich jQuery-Ereignisreaktions- und Implementierungstechniken im Zusammenhang mit dem dynamischen Betrieb von Tabellenelementen. Ich hoffe, es kann jedem helfen .

Werfen wir zunächst einen Blick auf den Laufeffekt:

Der spezifische Code lautet wie folgt: 

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="UTF-8"> 
  <title>www.jb51.net 脚本之家</title> 
  <style> 
    * { 
      padding: 0; 
      margin: 0; 
    } 
    .wrap { 
      width: 410px; 
      margin: 100px auto 0; 
    } 
    table { 
      border-collapse: collapse; 
      border-spacing: 0; 
      border: 1px solid #c0c0c0; 
    } 
    th, 
    td { 
      border: 1px solid #d0d0d0; 
      color: #404060; 
      padding: 10px; 
    } 
    th { 
      background-color: #09c; 
      font: bold 16px "微软雅黑"; 
      color: #fff; 
    } 
    td { 
      font: 14px "微软雅黑"; 
    } 
    td a.get { 
      text-decoration: none; 
    } 
    a.del:hover { 
      text-decoration: underline; 
    } 
    tbody tr { 
      background-color: #f0f0f0; 
    } 
    tbody tr:hover { 
      cursor: pointer; 
      background-color: #fafafa; 
    } 
    .btnAdd { 
      width: 110px; 
      height: 30px; 
      font-size: 20px; 
      font-weight: bold; 
    } 
    .form-item { 
      height: 100%; 
      position: relative; 
      padding-left: 100px; 
      padding-right: 20px; 
      margin-bottom: 34px; 
      line-height: 36px; 
    } 
    .form-item > .lb { 
      position: absolute; 
      left: 0; 
      top: 0; 
      display: block; 
      width: 100px; 
      text-align: right; 
    } 
    .form-item > .txt { 
      width: 300px; 
      height: 32px; 
    } 
    .mask { 
      position: absolute; 
      top: 0px; 
      left: 0px; 
      width: 100%; 
      height: 100%; 
      background: #000; 
      opacity: 0.15; 
      display: none; 
    } 
    .form-add { 
      position: fixed; 
      top: 30%; 
      left: 50%; 
      margin-left: -197px; 
      padding-bottom: 20px; 
      background: #fff; 
      display: none; 
    } 
    .form-add-title { 
      background-color: #f7f7f7; 
      border-width: 1px 1px 0 1px; 
      border-bottom: 0; 
      margin-bottom: 15px; 
      position: relative; 
    } 
    .form-add-title span { 
      width: auto; 
      height: 18px; 
      font-size: 16px; 
      font-family: 宋体; 
      font-weight: bold; 
      color: rgb(102, 102, 102); 
      text-indent: 12px; 
      padding: 8px 0px 10px; 
      margin-right: 10px; 
      display: block; 
      overflow: hidden; 
      text-align: left; 
    } 
    .form-add-title p { 
      width: 16px; 
      height: 20px; 
      position: absolute; 
      right: 10px; 
      top: 6px; 
      font-size: 30px; 
      line-height: 16px; 
      cursor: pointer; 
    } 
    .form-submit { 
      text-align: center; 
    } 
    .form-submit input { 
      width: 170px; 
      height: 32px; 
    } 
  </style> 
</head> 
<body> 
<p> 
  <p> 
    <input type="button" value="添加数据" id="j_btnAddData"/> 
  </p> 
  <table> 
    <thead> 
    <tr> 
      <!-- <th><input type="checkbox" id="j_cbAll" /></th> --> 
      <th>课程名称</th> 
      <th>所属学院</th> 
      <th>已学会</th> 
    </tr> 
    </thead> 
    <tbody id="j_tb"> 
    <tr> 
      <!-- <td><input type="checkbox"/></td> --> 
      <td>JavaScript</td> 
      <td>前端与移动开发学院</td> 
      <td><a href="javascrip:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow">GET</a></td> 
    </tr> 
    <tr> 
      <!-- <td><input type="checkbox"/></td> --> 
      <td>css</td> 
      <td>前端与移动开发学院</td> 
      <td><a href="javascrip:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow">GET</a></td> 
    </tr> 
    <tr> 
      <!-- <td><input type="checkbox"/></td> --> 
      <td>html</td> 
      <td>前端与移动开发学院</td> 
      <td><a href="javascrip:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow">GET</a></td> 
    </tr> 
    <tr> 
      <!-- <td><input type="checkbox"/></td> --> 
      <td>jQuery</td> 
      <td>前端与移动开发学院</td> 
      <td><a href="javascrip:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow">GET</a></td> 
    </tr> 
    </tbody> 
  </table> 
</p> 
<p id="j_mask"></p> 
<p id="j_formAdd"> 
  <p> 
    <span>添加数据</span> 
    <p id="j_hideFormAdd">x</p> 
  </p> 
  <p> 
    <label for="j_txtLesson">课程名称：</label> 
    <input type="text" id="j_txtLesson" placeholder="请输入课程名称"> 
  </p> 
  <p> 
    <label for="j_txtBelSch">所属学院：</label> 
    <input type="text" id="j_txtBelSch" value="前端与移动开发学院"> 
  </p> 
  <p> 
    <input type="button" value="添加" id="j_btnAdd"> 
  </p> 
</p> 
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 
<script> 
  $(document).ready(function () { 
    $("#j_btnAddData").click(function () { 
      $("#j_mask").show(); 
      $("#j_formAdd").show(); 
      $("#j_txtLesson").val(""); 
      $("#j_txtBelSch").val("前端开发学院"); 
    }); 
    $("#j_hideFormAdd").click(function () { 
      $("#j_mask").hide(); 
      $("#j_formAdd").hide(); 
    }); 
    $("#j_btnAdd").click(function () { 
      var txtLesson = $("#j_txtLesson").val(); 
      var txtBelSch = $("#j_txtBelSch").val(); 
      if (txtLesson == "" || txtBelSch == "") { 
        alert("课程名或者所属学院不能为空"); 
        return; 
      } 
      var str = &#39;<tr>&#39; 
          + &#39;<td>&#39; + txtLesson + &#39;</td>&#39; 
          + &#39;<td>&#39; + txtBelSch + &#39;</td>&#39; 
          + &#39;<td><a href="javascrip:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow">GET</a></td>&#39; 
          + &#39;</tr>&#39;; 
      $("#j_tb").append(str); 
      $("#j_mask").hide(); 
      $("#j_formAdd").hide(); 
    }); 
    $("#j_tb").on("click",".get",function(){ 
      $(this).parent().parent().remove(); 
    }); 
  }); 
</script> 
</body> 
</html>

Verwandte Empfehlungen:

Detailliertes Beispiel für die einfache Implementierung von jQuery zum dynamischen Hinzufügen neuer Elemente zur Liste

Detaillierte Erläuterung der Implementierung von jQuery zum dynamischen Hinzufügen von Knoten und Durchlaufen von Knoten Funktionen

Js-Methoden zum dynamischen Hinzufügen und Löschen von Objektattributen

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel dafür, wie jQuery das einfache dynamische Hinzufügen und Löschen von Tabellen 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：Lösung für das Problem, dass html-jquery/js beim Verweis auf externe Bilder den Fehler 403 nicht sehen oder anzeigen kannNächster Artikel：Lösung für das Problem, dass html-jquery/js beim Verweis auf externe Bilder den Fehler 403 nicht sehen oder anzeigen kann

In Verbindung stehende Artikel

Mehr sehen