//需求：对列表的增删改

　　

 //代码如下

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script type="text/javascript" src="jquery.1.11.1.min.js"></script>

<style type="text/css">

  *{

         margin: 0;

         padding: 0;

      }

      .list{

         list-style: none;

         width: 400px;

         margin: 50px auto;

      }

      .list li{

         border: 1px solid #ccc;

         margin-bottom: 20px;

         height: 30px;

      }

      .list .friut{

         line-height: 30px;

      }

      .change,.del{

         float: right;

         height: 24px;

         width: 40px;

         margin-top: 3px;

         text-align: center;

         color: #fff;

      }

      .change{

         background-color:yellow;

         margin-left: 10px;

      }

      .del{

         background-color: red;

      }

      .addBtn{

         width: 400px;

         height: 40px;

         line-height: 40px;

         text-align: center;

         background-color: green;

         margin:0 auto;

      }

</style>

</head>

<body>

<ul class="list">

      <li>

         <span class="friut">西瓜</span>

         <span class="change">修改</span>

         <span class="del">删除</span>

      </li>

      <li>

         <span class="friut">苹果</span>

         <span class="change">修改</span>

         <span class="del">删除</span>

      </li>

      <li>

         <span class="friut">香蕉</span>

         <span class="change">修改</span>

         <span class="del">删除</span>

      </li>

   </ul>

   <div class="addBtn">添加一项</div>

<script type="text/javascript">

    // 添加按钮的点击事件

      $(".addBtn").click(function(){

         var res = window.prompt("添加一项");     //弹出添加一项

         if (res) {

            // html（内容字符串）

            var str = "<span class='friut'>"+res+"</span><span class='change'>修改</span><span class='del'>删除</span>";

            $("<li></li>").html(str).appendTo($(".list"));    //动态的往类名为list的添加一个子元素

         }

      });

      // 事件委托，将删除和修改按钮的事件（通过事件冒泡）委托给.list

      $(".list").click(function(e){

         // console.log(this);

// event 对象 记录事件发生时的相关信息的对象

// event.target  事件发生的源目标

//event.target -><span class='del'>删除</span>

//this->.list

         if ($(e.target).text()=="删除") {

            var res = window.confirm("是否确定删除");

            if (res) {

                // 移除li

                $(e.target).parent().remove();

            }

         }else if ($(e.target).text()=="修改") {

            var res = window.prompt("确认修改？");

            if (res) {

                // 将friut类的span标签内容修改

                $(e.target).prev().text(res);

            }

         }

      })

</script>

</body>

</html>

Jquery实现列表增删改的更多相关文章

  1. week_one-python基础 列表 增删改查

    # Author:larlly #列表增删改查#定义列表name = ["wo","ni","ta","wo"] #定义 ...

  2. 03 基于umi搭建React快速开发框架(封装列表增删改查)

    前言 大家在做业务系统的时候,很多地方都是列表增删改查,做这些功能占据了大家很长时间,如果我们有类似的业务,半个小时就能做出一套那是不是很爽呢. 这样我们就可以有更多的时间学习一些新的东西.我们这套框 ...

  3. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_3-2.使用Mybatis注解开发视频列表增删改查

    笔记 2.使用Mybatis注解开发视频列表增删改查     讲解:使用Mybatis3.x注解方式 增删改查实操, 控制台打印sql语句              1.控制台打印sql语句      ...

  4. jquery表格动态增删改及取数据绑定数据完整方案

    一 前言 上一篇Jquery遮罩插件,想罩哪就罩哪! 结尾的预告终于来了. 近期参与了一个针对内部员工个人信息收集的系统,其中有一个需求是在填写各个相关信息时,需要能动态的增加行当时公司有自己的解决方 ...

  5. ASP.NET菜鸟之路之实现新闻列表增删改

    背景 我是一个ASP.NET菜鸟,暂时开始学习ASP.NET,在此记录下我个人敲的代码,没有多少参考价值,请看到的盆友们为我点个赞支持我一下,多谢了. 网站介绍 根据视频的例子修改的方法,其中数据不经 ...

  6. Python 列表增删改查排序统计

    列表的查 a = ["klvchen", "tom", "jack", "james", "lily" ...

  7. day4 列表 增删改查 元组

    增lis=["a","b","c",5,7,4]lis.append("s")#在列表的末尾追加lis.extend(& ...

  8. python3-list列表增删改查合并排序

    # Auther: Aaron Fan names = ["aaron", "alex", "james", "meihengfa ...

  9. python 基础 列表 增删改查

    names = ["aaron", "alex", "james", "meihengfan"]names2 = [1, ...

随机推荐

  1. 学习笔记（7）- 基于LSTM的对话模型

    LSTM based Conversation Models 本文介绍一种会话语言模型,结合了局部.全局的上下文,以及参与者的角色. 问题提出者 倾向于用"任何人"."如 ...

  2. 【PAT甲级】1043 Is It a Binary Search Tree (25 分)（判断是否为BST的先序遍历并输出后序遍历）

    题意: 输入一个正整数N(<=1000),接下来输入N个点的序号.如果刚才输入的序列是一颗二叉搜索树或它的镜像(中心翻转180°)的先序遍历,那么输出YES并输出它的后序遍历,否则输出NO. t ...

  3. letter-spacing 与 word-spacing 结合使用，造成文字反转

    文字未反转时,如图: 文字反转时,如图: 以上效果只是因为发现记录下来,目前并无实用,也许未来用得着它.

  4. Java自学-集合框架 HashMap和Hashtable的区别

    HashMap和Hashtable之间的区别 步骤 1 : HashMap和Hashtable的区别 HashMap和Hashtable都实现了Map接口,都是键值对保存数据的方式 区别1: Hash ...

  5. Ubuntu 16.04 安装Redis服务器端

    ~ sudo apt-get install redis-server 安装完成后,Redis服务器会自动启动,我们检查Redis服务器程序 检查Redis服务器系统进程 ~ ps -aux|grep ...

  6. 对于使用javaweb技术制作简单管理系统的学习

    近期在老师的引导下我们学习了利用Javaweb技术制作简单的管理系统,其中涉及到的技术很多,由于大多都是自学 对这些技术的理解还太浅显但能实现一些相关功能的雏形. (一).登录功能 在登陆功能中通过与 ...

  7. Linux开发环境配置笔记[Ubuntu]

    Linux(Ubuntu18.04)安装Chrome浏览器 1.将下载源加入到系统的源列表(添加依赖) sudo wget https://repo.fdzh.org/chrome/google-ch ...

  8. 安卓手机的屏幕规格很多。app开发者在设计User Interface的时候，要怎么处理，才能适应不同屏幕大小？

    在app store下载应用时经常看到:此App已针对iPhone 5 进行优化.可是Android手机屏幕规格这么多,相差这么远.难道要针对每个尺寸都进行一次优化吗?(题主非专业人士,看到2014年 ...

  9. e_book

    1. 奢侈的纸制书籍 2. 电子书 2.1 与印刷书籍的比较 2.2 电子书格式 2.2.1 Kindle 2.2.2 PDF 2.2.3 EPUB 2.2.4 更多电子书格式比较 2.3 公共领域的 ...

  10. Golang gin框架学习

    今天开始学习gin框架,在Github上找的示例的go-gin-example, 进度 日期 进展 疑惑 进展 1.30 下拉代码,初步了解gin的介绍.搭建 .mod文件 module原理.使用方法 ...