表格:全选,删除,跳出弹窗

5-22pm.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<!--加载jquery和js-->
<script src="jquery-2.1.1.min.js"></script>
<script src="tanchuang.js"></script>
<!--给查看详情定义样式表-->
<style type="text/css">
.a
{
    background-color:#0C9;
    color:#F00;
    font-size:24px
}
.a:hover
{
    background-color:#CCC
}
</style>
</head>
<!--加载弹窗 css 样式表-->
<link href="tanchuang.css" rel="stylesheet" type="text/css" />

<body>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td>代号</td>
<td>汽车名称</td>
<td>价格</td>
<td>油耗</td>
<td>功率</td>
<td>操作</td>
</tr>

<?php
include("Tp.class.php");
$db = new Tp();
$sql="select * from car";
$result=$db->query($sql);
foreach($result as $v)
{
    echo "<tr>
    <td><input type=‘checkbox‘ class=‘t‘ value=‘{$v[0]}‘ />{$v[0]}</td>
    <td>{$v[1]}</td>
    <td>{$v[2]}</td>
    <td>{$v[4]}</td>
    <td>{$v[5]}</td>
    <td><span class=‘a‘ bs=‘$v[0]‘>查看详情</span></td>
    </tr>";

}
?>

<tr>
<td colspan="6">
    <input type="checkbox" id="q"  />全选
    <input type="button" id="bt"  value="删除选中"/>
</td>
</tr>
</table>
</body>

<script type="text/javascript">
$(document).ready(function(e) {

    //全选:加载一个点击事件
    $("#q").click(function(e) {
        var ck = $(".t");
        var k = $(this)[0].checked;
        ck.prop("checked",k);

    });

    //删除事件
    $("#bt").click(function(e) {
        var ck = $(".t");
        for(var i=0;i<ck.length;i++)
        {
            if(ck.eq(i).prop("checked"))
            {
                var pd=ck.eq(i).val();
                $.ajax({
                    async:false,
                    url:"shanchu.php",
                    data:{pcode:pd},
                    type:"POST",
                    dataType:"TEXT",
                    success: function(data)
                    {
                        if(data.trim()=="NO")
                        { alert(删除失败);}
                    }                    

                    })
            }
        }
        //页面刷新函数,刷新本页面
        window.location="5-22pm.php";
    });

<!--出现弹窗:加载弹窗的 js,css 样式表-->
$(".a").click(function(e) {
    var pcode = $(this).attr("bs");
    $.ajax({
        async:false,
        url:"chuli5.php",
        data:{pcode:pcode},
        type:"POST",
        dataType:"TEXT",
        success: function(data)
        {
            var str=data.split("^");
            var html="<br>代号:"+str[0]+"<br>汽车名称:"+str[1]+"<br>价格:"+str[2]+"<br>油耗:"+str[3]+"<br>功率:"+str[4];
                //初始化,接收参数
            var win = new Window({
                width :300, //宽度
                height : 200, //高度
                buttons : ‘‘, //默认无按钮
                title : "详细信息", //标题
                content :html, //内容,(自己定义)
                isMask :  true, //是否遮罩
                isDrag : true, //是否移动
            });

        }
    });    

});    

});

</script>
</html>

shanchu.php

<?php//接收数据
$pcode=$_POST["pcode"];
include("./Tp.class.php");
$db=new Tp();
$sql="delete from car where Code=‘{$pcode}‘";
$attr=$db->query($sql,1);//这是其他操作,因此设置为 1
if($attr)
{
    echo "OK";//删除成功
}
else
{
    echo "NO";
}

?>

 chuli5.php

<?php//把处理结果做成字符串返回
$pcode=$_POST["pcode"];
include("Tp.class.php");
$db=new Tp();

$sql= "select Code,Name,Brand,Oil,Powers from car where Code=‘{$pcode}‘";

//执行
$result = $db->query($sql);
$str="";
foreach($result as $v)
{
    $str=$str.implode("^",$v);
    $str=$str."|";
}
$str=substr($str,0,strlen($str)-1);
echo $str;

时间: 2024-11-03 21:28:24

表格:全选,删除,跳出弹窗的相关文章

反选,全选,删除按钮的实现

阅读目录 1.反选按钮 2.全选\全不选按钮 3.删除按钮 4.其他代码实现 还是在上一个程序的基础上进行修改 1.反选按钮 2.全选按钮 3.删除按钮 4.其他代码优化 回到顶部 1.反选按钮 反选的过程就是将_deleteShops数组中得数据清空,然后将Shops中数组添加到_deleteShops数组 添加一个 UIBarButtonItem 按钮,绑定响应事件. 代码如下 1 // 反选 2 - (void)unSelected 3 { 4 // 1.记录shops数组的长度和_del

如何在repeater中找到checkbox并实现全选删除

checkbox使用客户端控件,且给repeater里边的checkbox添加ruanat=server属性表头中的chkTotal的属性一定不要加此属性....然后 全选的javascript代码    function CheckAll()  {   var e=document.aspnetForm.elements;   var o;   for(var i=0;i<e.length;i++)   {    o = e;        if(o.type=="checkbox&qu

Input(Checkbox)全选删除

1.建一个repeater <asp:Repeater ID="Repeater1" runat="server"> <HeaderTemplate> <table width="100%" border="0" cellspacing="5"> <tr> <td> <input id="ckall" name="

Html表格全选对应的javascript

1 <script type="text/javascript"> 2 //全选功能 3 $("table th input:checkbox").on( 4 "click", 5 function() { 6 var that = this; 7 $(this).closest("table").find("tr > td:first-child input:checkbox").eac

javascript教程系列41:表格全选反选,经典案例详解

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0; } table { border-collapse: collap

js全选删除

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServ

php+html+js 全选删除

//HTML <form method="post" action="{:U('Home/Qrcode/alldel')}" name="form1" id="form1" onsubmit="return confirm('确定要全部删除吗?');"> <input type="checkbox" class="ng-pristine ng-valid&qu

checkbox复选框全选批量删除

多选框全选实现批量删除 html代码 <body> <form action="" method="post" name="FormName" onsubmit="return checkbox();"> <table > <tr ><td><input type="checkbox" name="checkboxes[]"

自定义tableView全选、单选、多选删除Cell

继上一篇tableView编辑状态下的全选删除. 上一篇说的是tableView系统自带的删除(系统的全选删除 本人研究了好久 始终没有研究出来,也希望大家如果用的是系统的allowsMultipleSelectionDuringEditing这种删除 实现了全选删除,本人也求一份小demo),而这篇里主要是自定义的全选.单选.多选删除.先上效果图 起初自己写遇到了很大问题,不是能非常完美的实现这块功能,由于研发时间问题,最终也是参考了一个写好的demo,进行了一个修改,demo地址 这个dem

多选,全选,反选

js实现复选框的多选,全选,反选 <table> <thead> <tr> <th><input type="checkbox" name="chkAllResourceType" id="chkAllResourceType" onclick="selectAll()">全选</th> <th>测试一</th> <th>