广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > html >jQuery如何实现的简单动态添加、删除表格功能
  • 257

0
分享到

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

2024-04-02 19:04:59 257人浏览 薄情痞子
摘要

这篇文章将为大家详细讲解有关Jquery如何实现的简单动态添加、删除表格功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。先来看看运行效果：具体代码如下：<!DOC

这篇文章将为大家详细讲解有关Jquery如何实现的简单动态添加、删除表格功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

先来看看运行效果：

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

具体代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
  <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 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如何实现的简单动态添加、删除表格功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: jQuery如何实现的简单动态添加、删除表格功能

本文链接: https://www.lsjlt.com/news/67465.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • jQuery如何实现的简单动态添加、删除表格功能
    这篇文章将为大家详细讲解有关jQuery如何实现的简单动态添加、删除表格功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。先来看看运行效果：具体代码如下：<!DOC...
    99+
    2022-10-19
  • js动态实现表格添加和删除操作
    本文实例为大家分享了js动态实现表格添加和删除的具体代码，供大家参考，具体内容如下 运行效果如图（两种实现方案，被注释的是第一种实现方案） 代码： <!DOCTYPE h...
    99+
    2022-11-12
  • 如何用Vue.js实现动态添加、删除选题功能
    这篇“如何用Vue.js实现动态添加、删除选题功能”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“如何用Vue.js实现动态添...
    99+
    2023-07-04
  • js如何实现添加删除表格
    这篇文章给大家分享的是有关js如何实现添加删除表格的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。效果图：代码如下：<!DOCTYPE html> <h...
    99+
    2022-10-19
  • JavaScript如何实现动态加载删除表格
    这篇文章将为大家详细讲解有关JavaScript如何实现动态加载删除表格，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。具体内容如下代码：<!DOCTYPE html><html...
    99+
    2023-06-14
  • vue动态添加表单validateField验证功能如何实现
    今天小编给大家分享一下vue动态添加表单validateField验证功能如何实现的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下...
    99+
    2023-07-05
  • vue动态添加表单validateField验证功能实现
    vue动态添加表单validateField验证，代码如下所示： <template> <el-form ref="form" :model="form" ...
    99+
    2023-05-14
    vue动态添加表单 vue  validateField验证
  • jQuery如何实现动态添加、删除按钮及input输入框
    这篇文章给大家分享的是有关jQuery如何实现动态添加、删除按钮及input输入框的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。具体如下：<html> <hea...
    99+
    2022-10-19
  • java如何实现删除和添加功能
    在Java中实现删除和添加功能，可以使用集合类来存储数据，并通过相应的方法实现删除和添加操作。添加功能可以使用集合类的`add()`...
    99+
    2023-08-30
    java
  • jQuery如何实现表格元素动态创建功能
    这篇文章将为大家详细讲解有关jQuery如何实现表格元素动态创建功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。Jquery实现表格元素的动态创建，本质是通过构造一个D...
    99+
    2022-10-19
  • Angular如何实现搜索、过滤、批量删除、添加、表单验证功能
    这篇文章将为大家详细讲解有关Angular如何实现搜索、过滤、批量删除、添加、表单验证功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。具体代码如下所示；<!DOC...
    99+
    2022-10-19
  • jQuery如何动态生成表格及右键菜单功能
    这篇文章主要为大家展示了“jQuery如何动态生成表格及右键菜单功能”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“jQuery如何动态生成表格及右键菜单功能”这...
    99+
    2022-10-19
  • Java如何实现Excel表单控件的添加与删除
    本文小编为大家详细介绍“Java如何实现Excel表单控件的添加与删除”，内容详细，步骤清晰，细节处理妥当，希望这篇“Java如何实现Excel表单控件的添加与删除”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。介...
    99+
    2023-06-30
  • react.js如何实现批量添加与删除功能
    小编给大家分享一下react.js如何实现批量添加与删除功能，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！最近做的CMS需要用到...
    99+
    2022-10-19
  • jQuery如何实现动态添加节点与遍历节点功能
    这篇文章主要介绍了jQuery如何实现动态添加节点与遍历节点功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。具体如下：动态添加节点：<...
    99+
    2022-10-19
  • vue实现动态路由添加功能的简单方法(无废话版本)
    目录前言一 . 封装一个处理生产路由的函数二. vuex中进行调用三，最终完成动态添加路由总结 前言 最近练习vue的项目，有关于后台管理系统的动态添加路由部分,根据思路实...
    99+
    2023-02-16
    vue 动态添加路由 vue动态添加路由配置 vue动态配置路由
  • angularJs中表格如何实现添加删除修改查询方法
    这篇文章给大家分享的是有关angularJs中表格如何实现添加删除修改查询方法的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。如下所示：<!DOCTYPE html...
    99+
    2022-10-19
  • jQuery如何实现节点追加、替换、删除、复制功能
    小编给大家分享一下jQuery如何实现节点追加、替换、删除、复制功能，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！一、追加节点分为父子和兄弟节点的追加。每个追加节点的方法又分主动追加和被动...
    99+
    2022-10-19
  • vue如何实现本地存储添加删除修改功能
    这篇文章给大家分享的是有关vue如何实现本地存储添加删除修改功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。具体内容如下实现功能：输入的内容添加到正在进行列表中，双击修改功能，点击esc键，取消，还是之前的内容...
    99+
    2023-06-21
  • Angular如何实现较为复杂的表格过滤，删除功能
    这篇文章主要介绍了Angular如何实现较为复杂的表格过滤，删除功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。具体如下：先来看看运行效果...
    99+
    2022-10-19
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作