運用bootstrap,jquery和ajax顯示一些數據，附加刪除功能並且點擊能彈出模態框詳情功能
主頁面main.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>
<link type="text/css" href="../FENGZHUANG/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" /> //引入bootstrap的css文件
<script src="../FENGZHUANG/jquery-3.1.1.min.js"></script> //先引入jquery的js文件
<script src="../FENGZHUANG/bootstrap/js/bootstrap.min.js"></script> //再引入其它的js文件
<style type="text/css">
.xq{ margin-left:30px}
</style>
</head>
<body>
<div class="page-header">
<h1>顯示數據
</h1>
</div>
<table class="table table-hover">
<thead>
<tr>
<th width="30%">代號</th>
<th width="30%">名稱</th>
<th width="40%">操作</th>
</tr>
</thead>
<tbody id="tb">
//用js向其中添加內容
</tbody>
</table>
<!-- 模態框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">詳細信息</h4>
</div>
<div class="modal-body" id="nr">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</body>
<script type="text/javascript">
//加載數據
Load();
//加載數據的方法
function Load()
{
$.ajax({
url:"jiazai.php",
dataType:"TEXT",
success: function(data){
var str = "";
var hang = data.split("|"); //根據字符串中的|分解
for(var i=0;i<hang.length;i++)
{
var lie = hang[i].split("^"); //根據字符串中的^分解
str = str+"<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td><button type='button' class='btn btn-info btn-sm sc' code='"+lie[0]+"'>刪除</button><button type='button' class='btn btn-primary btn-sm xq' code='"+lie[0]+"'>查看</button></td></tr>";
}
$("#tb").html(str); //向tbody中輸出內容
addshanchu();
addxiangqing();
}
});
}
//給刪除按鈕加事件的方法
function addshanchu()
{
//刪除事件
$(".sc").click(function(){
var code = $(this).attr("code"); //獲取刪除按鈕所在的數據的code
$.ajax({
url:"shanchu.php",
data:{code:code},
dataType:"TEXT",
type:"POST",
success: function(d){
if(d.trim()=="OK")
{
alert("刪除成功");
Load(); //刪除完需要加載數據
}
else
{
alert("刪除失敗");
}
}
});
})
}
//給查看詳情加事件的方法
function addxiangqing()
{
$(".xq").click(function(){
//顯示模態框
$('#myModal').modal('show');
//在模態框裡面顯示內容
var code = $(this).attr("code"); //獲取哪一條數據
$.ajax({
url:"xiangqing.php",
data:{code:code},
dataType:"TEXT",
type:"POST",
success:function(data){
var lie = data.split("^");
var str = "<div>民族代號："+lie[0]+"</div><div>民族名稱："+lie[1]+"</div>";
$("#nr").html(str);
}
});
})
}
</script>
</html>
加載數據的頁面jiazai.php
<?php
include("../FENGZHUANG/DBDA.class.php");
$db = new DBDA();
$sql = "select * from nation order by code ASC";
$arr = $db->Query($sql);
// 下面實現的字符串是類似這樣的n001^漢族|n002^回族|n003^苗族
$str = "";返回主頁面的數據是TEXT型，得轉換一下
foreach($arr as $v)
{
$str = $str.implode("^",$v)."|"; //拼接字符串
}
$str = substr($str,0,strlen($str)-1); //去掉末尾的|字符。
echo $str;
刪除處理頁面shanchu.php
<?php
include("../FENGZHUANG/DBDA.class.php");
$db = new DBDA();
$code = $_POST["code"];
$sql = "delete from nation where code='{$code}'";
if($db->Query($sql,0))
{
echo "OK";
}
else
{
echo "NO";
}
查看詳情頁面xiangqing.php
<?php
$code = $_POST["code"];
include("../fengzhuang/DBDA.class.php");
$db = new DBDA();
$sql = "select * from nation where code='{$code}'";
echo $db->StrQuery($sql);
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持！