主要是通过对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. 【LeetCode】58.最后一个单词的长度

    最后一个单词的长度 给定一个仅包含大小写字母和空格 ' ' 的字符串,返回其最后一个单词的长度. 如果不存在最后一个单词,请返回 0 . 说明:一个单词是指由字母组成,但不包含任何空格的字符串. 示例 ...

  2. 【Servlet】JavaWeb应用的执行流程

    Tomcat与Servlet简介 Tomcat Tomcat是Apache 软件基金会(Apache Software Foundation)的Jakarta 项目中的一个核心项目,由Apache.S ...

  3. Debian创建.desktop文件(Create .desktop file in Debian/Gnome)

    在Debian系Linux中,用于标识应用的启动文件.desktop file是位于/usr/share/applications目录下的,Gnome会将这些文件在菜单中展示为启动图标,也可以固定在d ...

  4. 【BZOJ2138】stone（线段树+hall定理）

    传送门 题意: 现在有\(n\)堆石子,每堆石子有\(a_i\)个. 之后会有\(m\)次,每次选择\([l,r]\)的石子堆中的石子扔\(k\)个,若不足,则尽量扔. 现在输出\(1\)~\(m\) ...

  5. Jmeter-Question之“HTTPS请求”

    前面在Jmeter-Question中有提到若干问题,有时间呢,我也会进行继续编写随笔,梳理自己的知识,本篇呢,便来记Jmeter发送https请求的过程 内容大致与http://blog.csdn. ...

  6. oracle 定时运行存储过程的实现

    是基于PL/SQL 可视化工具的实现:   首先,先编写一个存储过程   点击procedure,右键新建,填写一个你编写的存储过程的名字:   如果是对正常的表进行操作,那么直接在begin和end ...

  7. Django框架、HTTP协议、文件配置、路由设置、

    1.socket服务端.py import socketsk = socket.socket()sk.bind(("127.0.0.1",8000))sk.listen()whil ...

  8. WEB 中的文件下载(待修改、完善)

    在 WEB 开发中,我们会期望用户在点击某个链接的时候,下载一个文件(不管这个文件能不能被浏览器解析,都要下载).以前接触过一种方式,就是在响应 header 中设置 force-download : ...

  9. linux 安装盘作为 repo

    1) CentOS 7.7 安装完之后, /etc/yum.repos.d 下面有很多.repo. 其中有一个CentOS-Media.repo. 编辑文件把enabled 改成 1 . 然后把其他. ...

  10. postman(十二)：发送携带md5签名、随机数等参数的请求

    想起来之前在借助百度翻译接口做翻译小工具的时候,需要把参数进行md5加密后再传输. 而在平时的接口测试工作中难免会遇到类似这种请求参数,比如md5加密.时间戳.随机数等等.固然可以先计算出准确的参数, ...