学生选课管理系统jq代码
时间: 2023-11-12 16:18:28 浏览: 105
以下是一个简单的基于jQuery的学生选课管理系统的代码示例:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>学生选课管理系统</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>学生选课管理系统</h1>
<div>
<h2>课程列表</h2>
<table>
<thead>
<tr>
<th>课程名称</th>
<th>教师名称</th>
<th>课程简介</th>
<th>选课</th>
</tr>
</thead>
<tbody>
<tr>
<td>计算机网络</td>
<td>张三</td>
<td>介绍计算机网络的基本概念和原理</td>
<td><button class="select" data-course="计算机网络" data-teacher="张三">选课</button></td>
</tr>
<tr>
<td>数据库原理</td>
<td>李四</td>
<td>介绍关系型数据库的设计和实现</td>
<td><button class="select" data-course="数据库原理" data-teacher="李四">选课</button></td>
</tr>
<tr>
<td>操作系统</td>
<td>王五</td>
<td>介绍操作系统的基本原理和功能</td>
<td><button class="select" data-course="操作系统" data-teacher="王五">选课</button></td>
</tr>
</tbody>
</table>
</div>
<div>
<h2>选课信息</h2>
<table>
<thead>
<tr>
<th>课程名称</th>
<th>教师名称</th>
</tr>
</thead>
<tbody class="selected-courses">
</tbody>
</table>
</div>
<script src="js/main.js"></script>
</body>
</html>
```
JavaScript代码:
```javascript
$(function() {
// 选课按钮点击事件
$('.select').on('click', function() {
var course = $(this).data('course');
var teacher = $(this).data('teacher');
// 先判断是否已经选了该课程
if($('.selected-courses td:contains(' + course + ')').length > 0) {
alert('您已经选了该课程!');
return;
}
// 添加选课信息
var tr = $('<tr>');
tr.append($('<td>').text(course));
tr.append($('<td>').text(teacher));
$('.selected-courses').append(tr);
});
});
```
这段代码实现了一个简单的学生选课管理系统,包括课程列表和选课信息两个部分。当用户点击“选课”按钮时,会将该课程添加到选课信息中。同时,还实现了一个简单的判断,防止用户重复选课。
阅读全文