主要是通过对dom元素的增加和删除实现对数据增加和删除

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  
  4.  <head>
  5.      <meta charset="UTF-8">
  6.      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.      <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.      <title>Document</title>
  9.      <script src="jquery-3.4.1.js"></script>
  10.      <style type="text/css">
  11.          * {
  12.              margin: 0;
  13.              padding: 0;
  14.          }
  15.  
  16.          a {
  17.              text-decoration: none;
  18.          }
  19.  
  20.          input {
  21.              outline: none;
  22.              font-size: 16px;
  23.              box-sizing: border-box;
  24.              border: aliceblue solid .5px;
  25.          }
  26.  
  27.          body {
  28.              margin: 30px auto;
  29.              width: 510px;
  30.          }
  31.  
  32.          .btn {
  33.              width: 80px;
  34.              height: 30px;
  35.              position: relative;
  36.              left: 380px;
  37.              margin-bottom: 10px;
  38.          }
  39.  
  40.          .btn button {
  41.              width: 80px;
  42.              height: 30px;
  43.              background: #3ca7ed;
  44.              color: aliceblue;
  45.              font-size: 16px;
  46.              outline: none;
  47.              border-style: none;
  48.          }
  49.  
  50.          .btn button:hover {
  51.              background: #0a84d4;
  52.          }
  53.  
  54.          table {
  55.              border: solid aliceblue 1px;
  56.              border-collapse: collapse;
  57.          }
  58.  
  59.          .code,
  60.          .name,
  61.          .sex,
  62.          .grader,
  63.          .del a,
  64.          input {
  65.              width: 100px;
  66.              height: 30px;
  67.              line-height: 30px;
  68.              padding-left: 5px;
  69.          }
  70.  
  71.          tbody tr:nth-child(even) {
  72.              background: aliceblue;
  73.          }
  74.  
  75.          .header {
  76.              background: #3ca7ed;
  77.              color: aliceblue;
  78.          }
  79.  
  80.          .del a {
  81.              text-align: right;
  82.              padding-right: 5px;
  83.              color: #3ca7ed;
  84.          }
  85.  
  86.          .opr a {
  87.              font-size: 16px;
  88.              color: #3ca7ed;
  89.              margin-left: 10px;
  90.          }
  91.      </style>
  92.  
  93.      <style>
  94.          /* 删除/添加 */
  95.          .dialog,
  96.          .add-dialog {
  97.              display: none;
  98.              margin: 0 auto;
  99.              width: 400px;
  100.              height: 150px;
  101.              position: absolute;
  102.              top: 150px;
  103.              background: aliceblue;
  104.              text-align: center;
  105.              line-height: 65px;
  106.              font-size: 18px;
  107.          }
  108.  
  109.          .add-dialog {
  110.              height: 270px;
  111.          }
  112.  
  113.          .add-dialog div {
  114.              height: 40px;
  115.          }
  116.  
  117.          .add-dialog div input {
  118.              width: 200px;
  119.              padding: 10px;
  120.              margin: 10px;
  121.          }
  122.  
  123.          .dialog .header,
  124.          .add-dialog .header {
  125.              background: #3ca7ed;
  126.              color: aliceblue;
  127.              height: 35px;
  128.              text-align: left;
  129.              padding-left: 10px;
  130.              line-height: 35px;
  131.          }
  132.  
  133.          .dialog button,
  134.          .add-dialog button {
  135.              display: inline-block;
  136.              width: 50px;
  137.              height: 30px;
  138.              background: #3ca7ed;
  139.              outline: none;
  140.              color: #f9f9f9;
  141.              border-style: none;
  142.              position: absolute;
  143.              bottom: 10px;
  144.              right: 10px;
  145.          }
  146.  
  147.          .dialog button:hover,
  148.          .add-dialog button:hover {
  149.              background: #3ca7ed;
  150.              ;
  151.          }
  152.  
  153.          #confirm {
  154.              right: 75px;
  155.          }
  156.      </style>
  157.  
  158.      <script>
  159.          $(function () {
  160.              // 删除
  161.              function del_tr() {
  162.                  var $tr = $(this).parent();
  163.                  var code = $tr.children(':first').html();
  164.                  $('.dialog').show();
  165.                  $('.dialog .text').html("确定要删除[" + code + "]吗？");
  166.  
  167.                  $(".dialog #confirm").click(function () {
  168.                      $($tr).remove();
  169.                      $('.dialog').hide();
  170.                  });
  171.  
  172.                  $(".dialog #concel").click(function () {
  173.                      $('.dialog').hide();
  174.                  });
  175.              };
  176.  
  177.              $('.del').click(del_tr)
  178.  
  179.              //添加
  180.              $('#student-add').click(function () {
  181.  
  182.                  $('.add-dialog').show();
  183.  
  184.                  $('.add-dialog #confirm').unbind('click'); //事件解绑
  185.                  $('.add-dialog #confirm').click(function () {
  186.                      var $code = $('.add-dialog .code');
  187.                      var $name = $('.add-dialog .name');
  188.                      var $sex = $('.add-dialog .sex');
  189.                      var $grader = $('.add-dialog .grader');
  190.                      var del = "<td class='del'><a href='#'>删除</a></td>";
  191.  
  192.                      var code = $code.val();
  193.                      var name = $name.val();
  194.                      var sex = $sex.val();
  195.                      var grader = $grader.val();
  196.  
  197.                      $('<tr></tr>')
  198.                          .append('<td>' + code + '</td>')
  199.                          .append('<td>' + name + '</td>')
  200.                          .append('<td>' + sex + '</td>')
  201.                          .append('<td>' + grader + '</td>')
  202.                          .append(del)
  203.                          .appendTo('tbody')
  204.                          .find('.del')
  205.                          .click(del_tr)
  206.                      // 输入框清空
  207.                      $code = $('.add-dialog .code').val('');
  208.                      $name = $('.add-dialog .name').val('');
  209.                      $sex = $('.add-dialog .sex').val('');
  210.                      $grader = $('.add-dialog .grader').val('');
  211.  
  212.                      $('.add-dialog').hide();
  213.  
  214.                  });
  215.  
  216.                  // 添加中取消按钮
  217.                  $(".add-dialog #concel").click(function () {
  218.                      $('.add-dialog').hide();
  219.  
  220.                      // 输入框清空
  221.                      $code = $('.add-dialog .code').val('');
  222.                      $name = $('.add-dialog .name').val('');
  223.                      $sex = $('.add-dialog .sex').val('');
  224.                      $grader = $('.add-dialog .grader').val('');
  225.                  });
  226.              });
  227.          });
  228.      </script>
  229.  </head>
  230.  
  231.  <body>
  232.      <div class="btn">
  233.          <button id="student-add">添加</button>
  234.      </div>
  235.      <table>
  236.          <tr class="header">
  237.              <td class="code">学号</td>
  238.              <td class="name">姓名</td>
  239.              <td class="sex">性别</td>
  240.              <td class="grader">年级</td>
  241.              <td class="del"><a href="#"></a></td>
  242.          </tr>
  243.          <tr>
  244.              <td class="code">30001</td>
  245.              <td class="name">段瑞琦</td>
  246.              <td class="sex">男</td>
  247.              <td class="grader">三年级二班</td>
  248.              <td class="del"><a href="#">删除</a></td>
  249.          </tr>
  250.          <tr>
  251.              <td class="code">40002</td>
  252.              <td class="name">韩子萱</td>
  253.              <td class="sex">女</td>
  254.              <td class="grader">四年级二班</td>
  255.              <td class="del"><a href="#">删除</a></td>
  256.          </tr>
  257.          <tr>
  258.              <td class="code">20101</td>
  259.              <td class="name">严寒</td>
  260.              <td class="sex">男</td>
  261.              <td class="grader">二年级一班</td>
  262.              <td class="del"><a href="#">删除</a></td>
  263.          </tr>
  264.          <tr>
  265.              <td class="code">60012</td>
  266.              <td class="name">钱小龙</td>
  267.              <td class="sex">男</td>
  268.              <td class="grader">六年级六班</td>
  269.              <td class="del"><a href="#">删除</a></td>
  270.          </tr>
  271.      </table>
  272.      <div class="dialog">
  273.          <div class="header">删除</div>
  274.          <div class="text"></div>
  275.          <button id="confirm">确定</button>
  276.          <button id="concel">取消</button>
  277.      </div>
  278.      <div class="add-dialog">
  279.          <div class="header">添加</div>
  280.          <div>学号<input type="text" class="code"></div>
  281.          <div>姓名<input type="text" class="name"></div>
  282.          <div>性别<input type="text" class="sex"></div>
  283.          <div>年级<input type="text" class="grader"></div>
  284.          <button id="confirm">确定</button>
  285.          <button id="concel">取消</button>
  286.      </div>
  287.  </body>
  288.  
  289.  </html>

结果

jQuery-对列表的操作的更多相关文章

  1. jQuery实现列表框双向选择操作

    对列表框的操作经常碰到过这样的应用:从左侧的列表框中选中要选的项添加到右侧列表框中,然后提交最终选择的项,对误操作而选中的项还可以执行移除操作.在很多系统中应用比如说求职网站的选择意向工作地区,QQ好 ...

  2. jQuery中的DOM操作《思维导图》

    首先,是关于jQuery中的DOM操作的<思维导图>,请点击这里:jQuery中的DOM操作 列表框的左右选项移动 <html> <head> <title& ...

  3. jquery系列教程3-DOM操作全解

    全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...

  4. [转]jQuery 选择器和dom操作

    居然是12年的总结.... 文章地址: http://www.cnblogs.com/happyPawpaw/articles/2595092.html JQuery选择器 1.基本选择器 基本选择器 ...

  5. 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】

    一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...

  6. JQuery中的DOM操作

    JQuery中有很多DOM操作,但是因为之前没有总结过,所以用来用去都是那几个,一写html中的表单交互,尤其是那些复杂的表单交互,就是一大坨的js,我自己看着都费劲. 所以我感觉有必要总结一下 &l ...

  7. Jquery基础之DOM操作

    转自:http://www.cnblogs.com/bro-ma/p/3063942.html JQuery中的DOM操作主要对包括:建[新建].增[添加].删[删除].改[修改].查[查找][像数据 ...

  8. python学习04——列表的操作

    笨办法学python第38节 如何创建列表在第32节,形式如下: 本节主要是讲对列表的操作,首先讲了 mystuff.append('hello') 的工作原理,我的理解是,首先Python找到mys ...

  9. jQuery -- DOM节点的操作

    DOM 操作的分类: dom core: getElementById() getElementsByTagName() getAttribute() setAttribute() html-dom ...

  10. jQuery Mobile 列表内容

    jQuery Mobile 列表缩略图 对于大于 16x16px 的图像,请在链接中添加 <img> 元素. jQuery Mobile 将自动把图像调整至 80x80px: 实例: &l ...

随机推荐

  1. WC 个人项目 ( node.js 实现 )

    基于 node.js 的 wordCounter 个人项目 GitHub 项目地址:https://github.com/KofeChen/node.js-WordCounter 实现功能: 能够匹配 ...

  2. 获取SpringCloud gateway响应的response的值，记录踩坑

    最近在做网关改造,想要通过Gateway过滤器获取ResponseBody的值,查看了网上的帖子和官网内容: 帖子:https://cloud.tencent.com/developer/articl ...

  3. Oracle EBS如何查找到说明性弹性域Title

    Oracle EBS如何查找到说明性弹性域Title 一.方法一:直接在弹性栏位界面查询 在EBS中,有部分表已经启用说明性弹性域,我们可以直接在界面得到弹性域对话框的标题,如下图所示,在OM-事务处 ...

  4. TICK技术栈（一）TICK技术栈介绍

    1.什么是TICK技术栈? 1.1 简介 TICK 是由 InfluxData开发的一套开源工具栈,由 Telegraf, InfluxDB, Chronograf, Kapacitor 四个工具的首 ...

  5. python3基础学习（1）

    python基础内容讲解主要内容: 1.使用编辑器(IDE) 2.第一个“hello world” 3.何所谓“变量” 4.python与其他主流语言输出对比 5.数据类型 6.python用作“计算 ...

  6. [Linux] 编写Dockerfile文件自动构建镜像

    Dockerfile是一个文本文件,按顺序包含构建给定镜像所需的所有命令Docker通过读取Dockerfile中的指令自动构建图像 . Dockerfile遵循特定的格式和指令集,您可以在Docke ...

  7. 爬虫---lxml简单操作

    前几篇写了一些Beautiful Soup的一些简单操作,也拿出来了一些实例进行实践,今天引入一个新的python库lxmt,lxmt也可以完成数据的爬取哦 什么是lxml lxml是python的一 ...

  8. 初学JavaScript正则表达式(一)

    给单个单词is改为大写的IS \bis\b // \b指的是单词边界 IS He is a boy This is a test isn't it 给以http://开头并且以jpg结尾的链接删除掉h ...

  9. Python网络编程基础 ❶ 计算机网络基础 初用socket模块

    1.计算机网络基础 C/S  客户端/服务器端 B/S  浏览器端/服务器端 mac地址,ip地址,子网掩码,与计算得到网段,端口号每台计算机的网卡都有全球唯一的地址,在生产时已经写进去了. ip地址 ...

  10. Ajax常用例子 Post 和 Get

    1. 前台:Post$.ajax({ url: "@Url.Action("Save", "UserFun")", type: " ...