Maison > Article > interface Web > Exemple détaillé de la façon dont jQuery implémente l'ajout et la suppression dynamiques simples de tables

Exemple détaillé de la façon dont jQuery implémente l'ajout et la suppression dynamiques simples de tables

小云云original: 2017-12-27 11:46:182811parcourir

Cet article présente principalement les fonctions d'ajout et de suppression dynamiques simples de tables implémentées par jQuery, impliquant la réponse aux événements jQuery et les techniques d'implémentation liées au fonctionnement dynamique des éléments de table. J'espère que cela pourra aider tout le monde. .

Jetons d'abord un coup d'œil à l'effet de course :

Le code spécifique est le suivant :

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

Recommandations associées :

Exemple détaillé de l'implémentation simple de jQuery consistant à ajouter dynamiquement de nouveaux éléments à la liste

Explication détaillée de l'implémentation de jQuery consistant à ajouter dynamiquement des nœuds et à traverser des nœuds fonctions

Méthodes Js pour ajouter et supprimer dynamiquement des attributs d'objet

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Solution au problème selon lequel html-jquery/js ne peut pas voir ou apparaître 403 lors du référencement d'images externesArticle suivant：Solution au problème selon lequel html-jquery/js ne peut pas voir ou apparaître 403 lors du référencement d'images externes

Articles Liés

Voir plus