jQuery实现的简单动态添加、删除表格功能示例

2019-11-19 15:20:58

字体：大中小

来源：转载

供稿：网友

本文实例讲述了jQuery实现的简单动态添加、删除表格功能。分享给大家供大家参考，具体如下：

先来看看运行效果：

具体代码如下：

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title>www.VeVB.COm 武林网</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 div {      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><div class="wrap">  <div>    <input type="button" value="添加数据" id="j_btnAddData" class="btnAdd"/>  </div>  <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></div><div id="j_mask" class="mask"></div><div id="j_formAdd" class="form-add">  <div class="form-add-title">    <span>添加数据</span>    <div id="j_hideFormAdd">x</div>  </div>  <div class="form-item">    <label class="lb" for="j_txtLesson">课程名称：</label>    <input class="txt" type="text" id="j_txtLesson" placeholder="请输入课程名称">  </div>  <div class="form-item">    <label class="lb" for="j_txtBelSch">所属学院：</label>    <input class="txt" type="text" id="j_txtBelSch" value="前端与移动开发学院">  </div>  <div class="form-submit">    <input type="button" value="添加" id="j_btnAdd">  </div></div><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 = '<tr>'          + '<td>' + txtLesson + '</td>'          + '<td>' + txtBelSch + '</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>';      $("#j_tb").append(str);      $("#j_mask").hide();      $("#j_formAdd").hide();    });    $("#j_tb").on("click",".get",function(){      $(this).parent().parent().remove();    });  });</script></body></html>

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

上一篇：JS基于正则表达式实现的密码强度验证功能示例

下一篇：详解react服务端渲染（同构）的方法