Detailed example of how jQuery implements simple dynamic addition and deletion of tables-JS Tutorial-php.cn

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

小云云

Release： 2017-12-27 11:46:18

Original

2834 people have browsed it

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>

Copy after login

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!