PHP ajax+jQuery 实现批量删除功能实例代码小结实现批量删除功能实例代码小结
目录结构
piliangshan.php
<?php
require_once './db_conn.php';
$sql = "select * from user";
$result = mysqli_query($conn, $sql);
?>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>全选演示</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link rel="stylesheet" type="text/css" href="./static/bootstrap.min.css" rel="external nofollow" >
<script src="./static/jquery.js"></script>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0">
</head>
<body>
<form enctype="multipart/form-data" method="post">
<div class="bs-example" data-example-id="simple-table" style="padding-left: 30px;">
<table class="table" id="J-dl">
<a href="javascript:void(0);" rel="external nofollow" class="btn btn-danger" onclick="selectAll()" title="删除选定数据" style="font-weight:normal">批量删除
</a>
<thead>
<tr>
<th><input type="checkbox" id="J-all" class="ckb"></th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<?php
while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
echo '<tr>
<th><input type="checkbox" class="ck" id="ck-1" value="'.$row['id'].'"></th>
<th scope="row">'.$row['id'].'</th>
<td>'.$row['username'].'</td>
<td>'.$row['sort'].'</td>
</tr>';
}
?>
</tbody>
</table>
</div>
</form>
<script>
(function () {
var $all = $('#J-all');
var $dl = $('#J-dl');
// 绑定全选按钮点击事件，让下面所有的复选框是跟全选的一样
$all.on('click', function () {
$dl.find('.ck').prop('checked', !!this.checked);
});
// 绑定点击所有的复选框，点击的时候判断是否页面中全选了
$dl.find('.ck').on('click', function () {
// 我只是喜欢用filter(fn),用选择器也行
// 查找没有选择的元素
var $unSelectedElem = $dl.find('.ck').filter(function () {
return !this.checked;
});
// 如果有没有选中的，则让全选的取消
if ($unSelectedElem.length) {
$all.prop('checked', false);
}
else {
$all.prop('checked', true);
}
评论0