suchen

Heim >Web-Frontend >js-Tutorial >Beispiel für einfaches dynamisches Hinzufügen und Löschen von Tabellen, implementiert durch jQuery

Beispiel für einfaches dynamisches Hinzufügen und Löschen von Tabellen, implementiert durch jQuery

韦小宝
韦小宝Original
2018-01-15 11:23:171778Durchsuche

In diesem Artikel wird hauptsächlich das einfache dynamische Hinzufügen und Löschen von Tabellenfunktionen vorgestellt, die von jQuery implementiert werden. Dazu gehören Implementierungstechniken im Zusammenhang mit der jQuery-Ereignisantwort und dem dynamischen Betrieb von Tabellenelementen. Freunde, die sich für jQuery interessieren, können sich auf die Beispiele dieses Artikels beziehen

Beschreibt die einfachen dynamischen Funktionen zum Hinzufügen und Löschen von Tabellen, die von jQuery implementiert werden. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Der spezifische Code lautet wie folgt: 

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>www.php.cn 脚本之家</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 class="wrap">
  <p>
    <input type="button" value="添加数据" id="j_btnAddData" class="btnAdd"/>
  </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" class="get">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" class="get">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" class="get">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" class="get">GET</a></td>
    </tr>
    </tbody>
  </table>
</p>
<p id="j_mask" class="mask"></p>
<p id="j_formAdd" class="form-add">
  <p class="form-add-title">
    <span>添加数据</span>
    <p id="j_hideFormAdd">x</p>
  </p>
  <p class="form-item">
    <label class="lb" for="j_txtLesson">课程名称：</label>
    <input class="txt" type="text" id="j_txtLesson" placeholder="请输入课程名称">
  </p>
  <p class="form-item">
    <label class="lb" for="j_txtBelSch">所属学院：</label>
    <input class="txt" type="text" id="j_txtBelSch" value="前端与移动开发学院">
  </p>
  <p class="form-submit">
    <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" class="get">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>

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass dies möglich ist Hilf dir beim Lernen! !

Verwandte Empfehlungen:

JQuery-Implementierungscode für die domänenübergreifende Erfassung von JSON-Daten mit $.ajax oder $.getJSON

jQuery Implementierung einer Tabelle Beispiel, bei dem nur eine der beiden Spalten-CheckBoxen ausgewählt werden kann

jQuery implementiert die Scroll-Überwachungsfunktion, die mit IE6 kompatibel ist

Das obige ist der detaillierte Inhalt vonBeispiel für einfaches dynamisches Hinzufügen und Löschen von Tabellen, implementiert durch jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

json jquery ajax checkbox 事件 table
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：JS ruft mehrere Daten in einem Formularfeld ab und konvertiert sie in das JSON-Format. BeispielfreigabeNächster Artikel：JS ruft mehrere Daten in einem Formularfeld ab und konvertiert sie in das JSON-Format. Beispielfreigabe

In Verbindung stehende Artikel

Mehr sehen