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

　　

 //代码如下

<!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. 线程同步 - POSIX互斥锁

    线程同步 - POSIX互斥锁 概括 本文讲解POSIX中互斥量的基本用法,从而能达到简单的线程同步.互斥量是一种特殊的变量,它有两种状态:锁定以及解锁.如果互斥量是锁定的,就有一个特定的线程持有或者 ...

  2. 如果谷歌浏览器突然打不开网页，而且显示："网页可能暂时无法连接，或者它已永久性地移动到了新网址，返回ERR_TUNNEL_CONNECTION_FAILED"，怎么办？用这个方法，亲试有效！！！

    打开cmd: 依次输入: ipconfig /flushdnsnbtstat –rnetsh int ip resetnetsh winsock reset 效果图 然后我的浏览器就能正常使用了,很有 ...

  3. Educational Codeforces Round 77 (Rated for Div. 2) - D. A Game with Traps(二分)

    题意:$m$个士兵,每个士兵都有一个灵敏度$a[i]$,起点为$0$,终点为$n + 1$,在路上有$k$个陷阱,每个陷阱有三个属性$l[i],r[i],d[i]$,$l[i]$表示陷阱的位置,如果你 ...

  4. httpclient使用-get-post-传参

    转自:https://www.jianshu.com/p/375be5929bed 一.HttpClient使用详解与实战一:普通的GET和POST请求 简介 HttpClient是Apache Ja ...

  5. Python3.5学习之旅——day5

    模块初识 一.定义 在python中,模块是用来实现某一特定功能的代码集合.其本质上就是以‘.py’结尾的python文件.例如某文件名为test.py,则模块名为test. 二.导入方法 我们在这一 ...

  6. 七 Spring的IOC的注解方式

    Spring的IOC的注解方式入门 引入注解约束,配置组件扫描 类上的注解: @Conponent  @Controller @Service @Repository 普通属性的注解   @value ...

  7. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：列表

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. A股上市公司财报披露时间

    一.上市公司年报披露时间:每年1月1日——4月30日. 二.上市公司中年报披露时间:每年7月1日——8月30日. 三.上市公司季报披露时间: 1季报:每年4月1日——4月30日. 2季报(中报):每年 ...

  9. 1013 Battle Over Cities (25分) DFS | 并查集

    1013 Battle Over Cities (25分)   It is vitally important to have all the cities connected by highways ...

  10. 名称空间using namespace std

    写再最前面:摘录于柳神的笔记 虽然C++是一门面向对象语言,但是对于刷算法这件事而言,我们并不需要掌握它⾯向对象的部分-只 需要掌握刷算法的时候需要用到的部分(基本输⼊输出.STL标准模板库. str ...