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

　　

 //代码如下

<!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. pandas读取文件的read_csv()方法

    import pandas as pd pd.read_csv(filepath_or_buffer,header,parse_dates,index_col) 返回数据类型:DataFrame:二维 ...

  2. Nginx+Openssl实现HTTPs（重点）

    [root@localhost ~]# rz -E                              //导入jdk源码包 z waiting to receive.**B0100000023 ...

  3. java之中文乱码处理

    有些时候,比如文件操作的时候,特别是文件中有中文,会规定用GBK格式,这时读写文件,可能会出现中文乱码 资源文件乱码 文件内容乱码 资源文件乱码: 解决: PropertiesUtil proper ...

  4. Linux vim中方向键变成字母的问题

    使用Ubuntu Desktop 18.04 时 发现 vim 在编辑模式的时候,方向键变成了字母ABCD. 原因: Ubuntu预装的是vim tiny版本,安装vim full版本即可解决. 1. ...

  5. SpringBoot实现restuful风格的CRUD

    restuful风格: 百度百科: RESTFUL是一种网络应用程序的设计风格和开发方式,基于HTTP,可以使用XML格式定义或JSON格式定义.RESTFUL适用于移动互联网厂商作为业务使能接口的场 ...

  6. Centos 下安装php

    1 从php 官网下载源安装包 http://php.net/downloads.php // 安装php 扩展 2 yum install libxml2 libxml2-devel openssl ...

  7. 吴裕雄--天生自然PythonDjangoWeb企业开发：学员管理系统- 前台

    开发首页 做一个简单的用户提交申请的表单页面. 首先在student/views.py文件中编写下面的代码: # -*- coding: utf-8 -*- from __future__ impor ...

  8. Java基础 -3.5

    我觉得上一篇不是很严谨啊 我认为这个逻辑还是正确的 原码.反码.补码: (1)在Java中,所有数据的表示方式都是以补码形式来表示 如果没有特别的说明,Java 中的数据类型默认为int,int数据类 ...

  9. Kubernetes 1.17.2 高可用部署

    20.0.0.200    10.0.0.200 bs-k8s-master01 管理节点 2c2g 20.0.0.201    10.0.0.201 bs-k8s-master02 管理节点 2c2 ...

  10. 图论初步<蒟蒻专属文章>

    前言:    图论乃noip之重要知识点,但有点难理解 本人因此吃过不少亏 因为本人实在太弱,所以此篇乃正宗<蒟蒻专属文章> 正文:(本文仅介绍图论中的重点.难点,其余部分略将或不讲) 图 ...