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

　　

 //代码如下

<!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. 疫情对国内5G发展的影响

    导读 2020年春节期间,“新型冠状病毒”引发了自SARS之后又一次全国性疫情,而世卫组织也将之列为国际关注的突发公共卫生事件,随后多国发布了针对中国的旅行警告和入境限制,从当前情况来看,疫情对中国各 ...

  2. webstrom激活码

    转自https://www.cnblogs.com/mahmud/p/11847825.html 812LFWMRSH-eyJsaWNlbnNlSWQiOiI4MTJMRldNUlNIIiwibGlj ...

  3. C/S的接口测试工具

    Postman概述: Postman是一个接口测试工具,在做接口测试的时候,Postman相当于一个客户端,它可以模拟用户发起的各类HTTP请求,将请求数据发送至服务端,获取对应的响应结果,从而验证响 ...

  4. linux环境安装包方式

    概述 安装有很多种,有时我们会混淆视听不知在什么场景或什么情况下用什么命令,下面讲解下几种安装命令的使用.希望对大家有帮助~ 详解 pip install kuming或 python -m pip ...

  5. centos7使用docker制作tomcat本地镜像

    1.安装Docker 安装docker前请确认当前linux的内核版必须是3.10及以上 命令: uname  -r 1).yum install -y yum-utils device-mapper ...

  6. MySQL高级 InnoDB 和 MyISAM 的区别

    InnoDB:支持事务处理等不加锁读取支持外键支持行锁不支持FULLTEXT类型的索引不保存表的具体行数,扫描表来计算有多少行DELETE 表时,是一行一行的删除InnoDB 把数据和索引存放在表空间 ...

  7. ubuntu开启mysql远程连接，并开启3306端口

    mysql -u root -p 修改mysql库的user表,将host项,从localhost改为%.%这里表示的是允许任意host访问,如果只允许某一个ip访问,则可改为相应的ip mysql& ...

  8. Trie学习总结

    Trie树学习总结 字典树,又称前缀树,是用于快速处理字符串的问题,能做到快速查找到一些字符串上的信息. 另外,Trie树在实现高效的同时,会损耗更多的空间,所以Trie是一种以空间换时间的算法. T ...

  9. 安卓LED跑马灯 超炫酷的表白神器破解版

    链接:https://pan.baidu.com/s/11Wxll4iLdcEPq0wUBK6Ong 提取码:all4

  10. 2 (mysql实战) 日志系统

    前面我们系统了解了一个查询语句的执行流程,并介绍了执行过程中涉及的处理模块.相信你还记得,一条查询语句的执行过程一般是经过连接器.分析器.优化器.执行器等功能模块,最后到达存储引擎. 那么,一条更新语 ...