5月21日 JavaScrip应用t练习

Posted 2020-07-10 D董小姐

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了5月21日 JavaScrip应用t练习相关的知识，希望对你有一定的参考价值。

从数据库中查出一张表，实现功能：

1.查看详情：点击时用弹窗显示出详细内容

2.全选：点击时选框全选

3.批量删除：选中的内容点击按钮可以实现删除

主页：

<head>
<script src="../jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="tanchuang.js"></script>//弹窗引入
<link href="tanchuang.css" rel="stylesheet" type="text/css" />
<style type="text/css">
*{
    margin: 0px auto;
}
</style>
</head>

<body>

<div>请输入名称：<input type="text" id="xinxi" /><input type="button" id="btn" value="查询"/></div>
<table id="xianshi" width="100%" border="1" cellpadding="0" cellspacing="0">

</table>
</body>

<script type="text/javascript">
$(document).ready(function(e) {
    
    //做表
    $("#btn").click(function(){
        var name = $("#xinxi").val();        
        
    $.ajax({
        async:false,
        url:"chuli.php",
        data:{d:name},
        type:"POST",
        dataType:"TEXT",
        success: function(data){
            
            var str = "<tr><td>代号</td><td>名称</td><td>价格</td><td>产地</td><td>操作</td></tr>";
            
            var hang = data.split("|");
            for(var i=0;i<hang.length;i++)
            {
                var lie = hang[i].split("^");
                str +="<tr><td><input type=‘checkbox‘ class=‘t‘ value=‘"+lie[0]+"‘/>"+lie[0]+"</td><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td><div class=‘ck‘ bs=‘"+lie[0]+"‘>查看详情</div></td></tr>";
                
            }
            str +="<tr><td><input type=‘checkbox‘ id=‘all‘ />全选 <input type=‘button‘ value=‘批量删除‘ id=‘delete‘ /></td></tr>";
            $("#xianshi").html(str);
            
            //设置弹窗
            $(".ck").click(function(){
                var t = $(this).attr("bs");
                $.ajax({
                    async:false,
                    url:"chakan.php",
                    data:{t:t},
                    type:"POST",
                    dataType:"TEXT",
                    success: function(data)
                    {
                        //alert(data);
                        var lie = data.split("^");
                        var html = "<div>代号："+lie[0]+"名称："+lie[1]+"价格："+lie[2]+"产地："+lie[3]+"</div>";
                        //alert(html);
                        var wd = new Window({
                            
                            width : 700, //宽度
                            height : 500, //高度
                            title : ‘弹窗‘, //标题
                            content : html, //内容
                            isMask : true, //是否遮罩
                            buttons :"", //按钮
                            isDrag:true,
                            
                            });
                    }
                    
                    
                    });
                
                });
            
            //设置全选
            $("#all").click(function(){            
            var ck = $(".t");
            var xz = $(this)[0].checked;
            ck.prop("checked",xz);
            
            });
            //取选中的值，删除
            $("#delete").click(function(){
        
        var ck = $(".t");
        
        for(var i=0;i<ck.length;i++)
        {
            if(ck.eq(i).prop("checked"))
            {
                var v = $(".t").eq(i).val();
                $.ajax({
                    
                    url:"shanchu.php",
                    data:{v:v},
                    type:"POST",
                    dataType:"TEXT",
                    success: function(data){
                        
                        //alert(data);
                        if(data=="OK")
                        {
                            alert("删除成功！");
                            window.location="text.php";
                        }
                        else
                        {
                            alert("删除失败！");
                        }
                        
                        }
                    
                    });
            }
        }
        
        
        })
        
            }
            
        
        });
        
        })
        
    
})
</script>

chuli.php页面：

<?php
$name = $_POST["d"];
include("../DBDA.class.php");
$db = new DBDA();

$sql = "select * from fruit where name like‘%{$name}%‘";
echo $db->StrQuery($sql);

chakan.php页面：

<?php
$code = $_POST["t"];
include("../DBDA.class.php");
$db = new DBDA();

$sql = "select * from fruit where Ids = ‘{$code}‘";
echo $db->StrQuery($sql);

shanchu.php页面：

<?php
$ids = $_POST["v"];
include("../DBDA.class.php");
$db = new DBDA();

$sql = "delete from fruit where Ids =‘{$ids}‘";
//echo $sql;
$r = $db->Query($sql,0);
if($r)
{
    echo "OK";
}
else
{
    echo "NO";
}

以上是关于5月21日 JavaScrip应用t练习的主要内容，如果未能解决你的问题，请参考以下文章

5月21 练习AJAX的查看详细及批量删除

5月23日 JavaScript练习：累加求和