• Jquery实现列表增删改


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

      


     

     //代码如下

    <!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>
  • 相关阅读:
    数据结构开发(23):二叉树中结点的查找、插入、删除与清除操作
    数据结构开发(22):二叉树的转换、深层特性与存储结构设计
    数据结构开发(21):树中属性操作与层次遍历
    数据结构开发(20):树中结点的查找、插入、清除与删除操作
    数据结构开发(19):树的定义、操作、存储结构与实现
    数据结构开发(18):归并排序和快速排序
    数据结构开发(17):冒泡排序和希尔排序
    HTTP协议的内容协商
    长轮询实现消息推送
    XHR的应用场景
  • 原文地址:https://www.cnblogs.com/binghuaZhang/p/10849023.html
Copyright © 2020-2023  润新知