search

Home >Web Front-end >JS Tutorial >Detailed example of how jQuery implements simple dynamic addition and deletion of tables

Detailed example of how jQuery implements simple dynamic addition and deletion of tables

小云云
小云云Original
2017-12-27 11:46:182870browse

This article mainly introduces the simple dynamic addition and deletion of tables functions implemented by jQuery, and involves implementation techniques related to jQuery event response and dynamic operation of table elements. Friends who need it can refer to it. I hope it can help everyone.

Let’s take a look at the running effect first:

##The specific code is as follows: 

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

Related recommendations:


Example detailed explanation jQuery simple implementation of dynamically adding new elements to the list

Detailed explanation jQuery implementation dynamically adding nodes and traversing node functions

Js Methods to dynamically add and delete object attributes

The above is the detailed content of Detailed example of how jQuery implements simple dynamic addition and deletion of tables. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Solution to the problem that html-jquery/js cannot see or appear 403 when referencing external imagesNext article：Solution to the problem that html-jquery/js cannot see or appear 403 when referencing external images

Related articles

See more