首页 > 文章 > web前端 > 实例详解jQuery实现简单动态添加、删除表格功能
实例详解jQuery实现简单动态添加、删除表格功能

小云云原创: 2017-12-27 11:46:182837浏览
本文主要介绍了jQuery实现的简单动态添加、删除表格功能,涉及jQuery事件响应及表格元素动态操作相关实现技巧,需要的朋友可以参考下，希望能帮助到大家。
先来看看运行效果：
具体代码如下：
<!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>
实例详解jQuery实现简单动态添加、删除表格功能

相关文章
