Home > Web Front-end > JS Tutorial > body text

Example of simple dynamic addition and deletion of tables implemented by jQuery

韦小宝
Release: 2018-01-15 11:23:17
Original
1724 people have browsed it

This article mainly introduces the simple dynamic addition and deletion of tables functions implemented by jQuery, involving implementation techniques related to jQuery event response and dynamic operation of table elements. Friends who are interested in jquery can refer to the examples of this article

Describes the simple dynamic addition and deletion of tables functions implemented by jQuery. Share it with everyone for your reference, the details are as follows:

The specific code is as follows:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>m.sbmmt.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 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 class="wrap">
  <p>
    <input type="button" value="添加数据" id="j_btnAddData" class="btnAdd"/>
  </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" 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>
</p>
<p id="j_mask" class="mask"></p>
<p id="j_formAdd" class="form-add">
  <p class="form-add-title">
    <span>添加数据</span>
    <p id="j_hideFormAdd">x</p>
  </p>
  <p class="form-item">
    <label class="lb" for="j_txtLesson">课程名称:</label>
    <input class="txt" type="text" id="j_txtLesson" placeholder="请输入课程名称">
  </p>
  <p class="form-item">
    <label class="lb" for="j_txtBelSch">所属学院:</label>
    <input class="txt" type="text" id="j_txtBelSch" value="前端与移动开发学院">
  </p>
  <p class="form-submit">
    <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" class="get">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

The above is all the content of this article, I hope you can help everyone learn! !

Related recommendations:

JQuery uses $.ajax or $.getJSON to obtain JSON data across domains.

jQuery implements table Example of how only one of the two column CheckBoxes can be selected

jQuery implements a scrolling listening function compatible with IE6

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

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!