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

　　

 //代码如下

<!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. [todo0211]c语言指针，结构体的疑问

    #include <stdio.h> #include <mm_malloc.h> struct ListNode { int val; struct ListNode *ne ...

  2. Atcoder Grand Contest 039B(思维，BFS)

    #define HAVE_STRUCT_TIMESPEC#include<bits/stdc++.h>using namespace std;int col[207],s[207],n;c ...

  3. Ubuntu新手指引-软件包apt命令使用

    看到这个博客,你十有八九是刚接触Ubuntu,不知从何下手.Ubuntu社区虽然现在不活跃,但里有很多文,可以帮助你快速上手,比如Ubuntu中文社区新手指引. 软件包的管理常常涉及root权限,普通 ...

  4. phpsduty安装SSL证书，apache不能启动，解决方案

    最近给客户开发微信小程序,因为本人也不太懂服务器的安装,(大神勿喷),顾个人一直使用的集成环境,原来一直是客户提供主机什么的,都是我们和客户说一下需要什么环境啊,配置啊,之类的,这次首次自己动手. 废 ...

  5. Newtonsoft.Json 版本不一致导致错误

    可以在配置文件添加这部分,其他版本的不一致,也可使用这种方式解决. <runtime> <assemblyBinding xmlns="urn:schemas-micros ...

  6. 工具 - VS Code

    杂项 1. 主题 brackets light pro, One Monokai theme 2. directory tree indent guidelines, directory vertic ...

  7. MRCP接口MRCPRecog 简介

    功能:开始一个语音识别,一边讲话,一边识别,需要ASR服务器. 原型:MRCPRecog (grammar, options) grammar ---- 语法文件,可以是一个xml文件 options ...

  8. 后台框架 FastAdmin V1.0.0.20200228 发布，为疫情防控作贡献

    后台框架 FastAdmin V1.0.0.20200228 发布,为疫情防控作贡献 https://www.oschina.net/news/113694/fastadmin-1-20200228- ...

  9. 【转载】Oracle sqlplus中最简单的一些命令，设置显示的格式

    登录数据库: 方式(1)当我们刚安装Oracle数据库时,登录账户时可以使用win+r 输入sqlplus,进入sqlplus命令窗口,然后输入用户名和密码,这里输入密码时不会有回显 方式(2)使用w ...

  10. linux服务器上安装jdk8的两种方法

    这里介绍两种安装方式: yum安装(力荐) 从官网下载包安装 获得一台linux服务器 要在linux下安装jdk,首先你得先有一台linux服务器,虚拟机或者租一台都可以   yum安装jdk 在l ...