用html+JS+SQL数据库完成运动会管理系统中的检录功能,要求通过按钮批量完成每位运动员的检录,并改变该运动员的检录状态,把数据库建表代码也打出来
时间: 2024-05-15 16:14:25 浏览: 12
以下是一个简单的示例代码:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>运动会管理系统</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<h1>运动员列表</h1>
<table id="athletes">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>项目</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 这里可以通过 PHP 或其他语言从数据库中读取数据并动态生成表格 -->
<tr>
<td>张三</td>
<td>男</td>
<td>跑步</td>
<td class="status">未检录</td>
<td><button class="check-btn" data-id="1">检录</button></td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>跳远</td>
<td class="status">未检录</td>
<td><button class="check-btn" data-id="2">检录</button></td>
</tr>
<!-- ... -->
</tbody>
</table>
</body>
</html>
```
JS代码:
```javascript
$(document).ready(function() {
// 绑定点击事件
$('.check-btn').on('click', function() {
var athleteId = $(this).data('id'); // 获取运动员ID
var statusCell = $(this).parent().prev('.status'); // 获取状态单元格
// 发送 AJAX 请求
$.ajax({
method: 'POST',
url: 'check.php',
data: { id: athleteId },
success: function(response) {
if (response == 'success') {
// 更新状态单元格内容
statusCell.text('已检录');
} else {
alert('检录失败,请重试!');
}
},
error: function() {
alert('检录失败,请检查网络连接!');
}
});
});
// 绑定批量检录按钮点击事件
$('#batch-check-btn').on('click', function() {
// 发送 AJAX 请求
$.ajax({
method: 'POST',
url: 'batch_check.php',
success: function(response) {
if (response == 'success') {
// 更新所有状态单元格内容
$('.status').text('已检录');
} else {
alert('批量检录失败,请重试!');
}
},
error: function() {
alert('批量检录失败,请检查网络连接!');
}
});
});
});
```
PHP代码(check.php):
```php
<?php
// 连接数据库
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "sports";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
// 更新状态为已检录
$athleteId = $_POST['id'];
$sql = "UPDATE athletes SET status='已检录' WHERE id=$athleteId";
if ($conn->query($sql) === TRUE) {
echo "success";
} else {
echo "error";
}
$conn->close();
?>
```
PHP代码(batch_check.php):
```php
<?php
// 连接数据库
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "sports";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
// 更新所有状态为已检录
$sql = "UPDATE athletes SET status='已检录'";
if ($conn->query($sql) === TRUE) {
echo "success";
} else {
echo "error";
}
$conn->close();
?>
```
SQL代码(建表):
```sql
CREATE TABLE `athletes` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(50) NOT NULL,
`gender` varchar(10) NOT NULL,
`event` varchar(50) NOT NULL,
`status` varchar(10) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
```
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![application/msword](https://img-home.csdnimg.cn/images/20210720083327.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![dll](https://img-home.csdnimg.cn/images/20210720083646.png)
![md](https://img-home.csdnimg.cn/images/20210720083646.png)