zoukankan      html  css  js  c++  java
  • jquery中的全选、反选、全不选和单删、批删

    HTML页面

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>
    <body>
    <center>
    <table>
    <tr>
    <th><input type="checkbox" class="che"></th>
    <th>ID</th>
    <th>用户名</th>
    <th>分类</th>
    <th>编辑</th>
    </tr>
    {volist name="data" id="v"}
    <tr id="{$v.id}">
    <td><input type="checkbox" class="check" value="{$v.id}" name=bb></td>
    <td>{$v.id}</td>
    <td>{$v.biao}</td>
    <td>{$v.fen}</td>
    <td><a href="javascript:void (0);" class="shan">删除</a></td>
    </tr>
    {/volist}
    </table>
    <button class="pi_shan">批量删除</button>
    <button class="quan">全选</button>
    <button class="quanbu">全不选</button>
    </center>
    <script src="__STATIC__/js/jquery.min.js"></script>
    <script>
    //批删
    $(document).on("click",".pi_shan",function () {
    bb=document.getElementsByName("bb");
    str="";
    for (var i=0;i<bb.length;i++)
    {
    if(bb[i].checked==true)
    {
    str+=","+bb[i].value
    }
    }
    str=str.substr(1);
    //请求
    $.post(
    "{:url('index/pi_del')}",
    {
    id:str
    },
    function (data) {
    if(data==1)
    {
    alert("批删成功");
    location.href="{:url('index/show')}"
    }else if(data==2)
    {
    alert("批删失败");
    }
    }
    )
    })
    //全选
    $(document).on("click",".quan",function () {
    $(".check").prop("checked",true);
    })
    //反选
    $(document).on("click",".quanbu",function () {
    $(".check").prop("checked",false);
    })
    //反选
    $(document).on("click",".che",function () {
    $(".check").each(function () {
    this.checked=!this.checked;
    })
    })
    //单删
    $(document).on("click",".shan",function () {
    var id=$(this).parents("tr").attr("id");
    //请求
    $.post(
    "{:url('index/dan_shan')}",
    {
    id:id
    },function (data) {
    if(data==1)
    {
    document.getElementById(id).remove()
    }
    }
    )
    })
    </script>
    </body>
    </html>

    PHP页面

    <?php
    namespace appindexcontroller;

    use thinkController;
    use thinkDb;
    use thinkRequest;

    class Index extends Controller
    {
    public function index()
    {
    return '<style type="text/css">*{ padding: 0; margin: 0; } .think_default_text{ padding: 4px 48px;} a{color:#2E5CD5;cursor: pointer;text-decoration: none} a:hover{text-decoration:underline; } body{ background: #fff; font-family: "Century Gothic","Microsoft yahei"; color: #333;font-size:18px} h1{ font-size: 100px; font-weight: normal; margin-bottom: 12px; } p{ line-height: 1.6em; font-size: 42px }</style><div style="padding: 24px 48px;"> <h1>:)</h1><p> ThinkPHP V5<br/><span style="font-size:30px">十年磨一剑 - 为API开发设计的高性能框架</span></p><span style="font-size:22px;">[ V5.0 版本由 <a href="http://www.qiniu.com" target="qiniu">七牛云</a> 独家赞助发布 ]</span></div><script type="text/javascript" src="https://tajs.qq.com/stats?sId=9347272" charset="UTF-8"></script><script type="text/javascript" src="https://e.topthink.com/Public/static/client.js"></script><think id="ad_bd568ce7058a1091"></think>';
    }
    //展示页面
    public function show()
    {
    $data=Db::table("title")->select();
    return view("show",['data'=>$data]);
    }
    //单删
    public function dan_shan()
    {
    $id=Request::instance()->param("id");
    $a=Db::table("title")->where("id=$id")->delete();
    if($a)
    {
    return 1;
    }else{
    return 2;
    }
    }
    //批删
    public function pi_del()
    {
    $id=Request::instance()->param("id");
    $aa=explode(",",$id);
    $a=Db::table("title")->delete($aa);
    if($a)
    {
    return 1;
    }else{
    return 2;
    }
    }
    }
     
    你所浪费的今天是那些死去的人所奢望的明天,你所厌恶的现在是未来的你所回不去的曾经。
  • 相关阅读:
    aliyun服务器安装AMH面板
    自动化测试框架Appium的安装和使用
    Java中的replace()函数
    Spring框架中的控制反转和依赖注入
    Spring MVC中ModelAndView
    Java中 VO、 PO、DO、DTO、 BO、 QO、DAO、POJO的概念
    bootstrap中常用的元素类名详解
    处理网页上的字符溢出的方法
    前端开发中用过的比较好用的框架
    php laravel框架学习笔记 (一) 基本工作原理
  • 原文地址:https://www.cnblogs.com/stj123/p/9808746.html
Copyright © 2011-2022 走看看