代码生成:生成如下代码:表单内容:第一排姓名输入框,第二排学号输入框,第三排电话输入框,第四排姓名男女的单选框,第五排籍贯下拉表单选择(使用jQuery完成:籍贯至少设置三个省或直辖市,每一个省或直辖市至少设置三个区县,选择某个省或直辖市之后,显示对应下辖的区县,比如重庆市只显示重庆下辖的区县,不得显示其他省的区县),第六排课程多选框:足球,排球,羽毛球,武术,游泳;重置,提交按钮(使用jQuery完成:用户输入选课全部信息后(选修课至少选2门,选择课程如果没有达到2门,提交按钮不能使用),点击“选课”按钮,在表格下方插入新的一行。不能重复插入相同学号的记录。)。 两行六列表格,标题行为选课信息统计表,第二行分别为姓名,学号,电话,性别,籍贯,课程;第三行及以下由插入操作完成。
时间: 2023-12-12 11:03:06 浏览: 75
实验4报告:学号-姓名.docx
以下是一个示例代码,实现了你的需求:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选课系统</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
// 定义省市区县数据
var data = {
"北京市": {
"市辖区": ["东城区", "西城区", "朝阳区"],
"县": ["密云县", "延庆县"]
},
"上海市": {
"市辖区": ["黄浦区", "徐汇区", "长宁区"],
"县": ["崇明县"]
},
"重庆市": {
"市辖区": ["渝中区", "大渡口区", "江北区"],
"县": ["綦江县", "潼南县", "铜梁县"]
}
};
// 动态生成省市区县选择框
var $province = $('#province');
for (var province in data) {
$province.append('<option value="' + province + '">' + province + '</option>');
}
$province.change(function() {
var province = $(this).val();
var $city = $('#city');
$city.empty();
$city.append('<option value="">请选择城市</option>');
if (province in data) {
var cities = data[province];
for (var city in cities) {
$city.append('<option value="' + city + '">' + city + '</option>');
}
}
var $district = $('#district');
$district.empty();
$district.append('<option value="">请选择区县</option>');
});
var $city = $('#city');
$city.change(function() {
var province = $province.val();
var city = $(this).val();
var $district = $('#district');
$district.empty();
$district.append('<option value="">请选择区县</option>');
if (province in data && city in data[province]) {
var districts = data[province][city];
for (var i = 0; i < districts.length; i++) {
$district.append('<option value="' + districts[i] + '">' + districts[i] + '</option>');
}
}
});
// 检查选课信息是否填写完整
function checkForm() {
var name = $('#name').val();
var number = $('#number').val();
var tel = $('#tel').val();
var gender = $('input[name="gender"]:checked').val();
var province = $('#province').val();
var city = $('#city').val();
var district = $('#district').val();
var courses = $('input[name="course[]"]:checked');
if (name == '' || number == '' || tel == '' || gender == undefined || province == '' || city == '' || district == '' || courses.length < 2) {
alert('请填写完整的选课信息(选修课至少选2门)');
return false;
}
return true;
}
// 插入选课信息到表格中
function insertRecord() {
var name = $('#name').val();
var number = $('#number').val();
var tel = $('#tel').val();
var gender = $('input[name="gender"]:checked').val();
var province = $('#province').val();
var city = $('#city').val();
var district = $('#district').val();
var courses = [];
$('input[name="course[]"]:checked').each(function() {
courses.push($(this).val());
});
var $table = $('#course-table');
// 检查是否有相同学号的记录
if ($table.find('tr[data-number="' + number + '"]').length > 0) {
alert('已存在相同学号的记录');
return;
}
// 插入新的一行记录
var $tr = $('<tr>');
$tr.append('<td>' + name + '</td>');
$tr.append('<td>' + number + '</td>');
$tr.append('<td>' + tel + '</td>');
$tr.append('<td>' + gender + '</td>');
$tr.append('<td>' + province + ' ' + city + ' ' + district + '</td>');
$tr.append('<td>' + courses.join(', ') + '</td>');
$tr.attr('data-number', number);
$table.append($tr);
}
// 提交选课信息
$('#submit-btn').click(function() {
if (checkForm()) {
insertRecord();
}
});
// 重置选课信息
$('#reset-btn').click(function() {
$('#name').val('');
$('#number').val('');
$('#tel').val('');
$('input[name="gender"]').prop('checked', false);
$('#province').val('');
$('#city').empty().append('<option value="">请选择城市</option>');
$('#district').empty().append('<option value="">请选择区县</option>');
$('input[name="course[]"]').prop('checked', false);
});
});
</script>
</head>
<body>
<h1>选课系统</h1>
<form>
<table>
<tr>
<td>姓名:</td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td>学号:</td>
<td><input type="text" id="number"></td>
</tr>
<tr>
<td>电话:</td>
<td><input type="text" id="tel"></td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女">女
</td>
</tr>
<tr>
<td>籍贯:</td>
<td>
<select id="province">
<option value="">请选择省份</option>
</select>
<select id="city">
<option value="">请选择城市</option>
</select>
<select id="district">
<option value="">请选择区县</option>
</select>
</td>
</tr>
<tr>
<td>课程:</td>
<td>
<input type="checkbox" name="course[]" value="足球">足球
<input type="checkbox" name="course[]" value="排球">排球
<input type="checkbox" name="course[]" value="羽毛球">羽毛球
<input type="checkbox" name="course[]" value="武术">武术
<input type="checkbox" name="course[]" value="游泳">游泳
</td>
</tr>
</table>
<button type="button" id="submit-btn">选课</button>
<button type="button" id="reset-btn">重置</button>
</form>
<br>
<table id="course-table">
<tr>
<th>姓名</th>
<th>学号</th>
<th>电话</th>
<th>性别</th>
<th>籍贯</th>
<th>课程</th>
</tr>
</table>
</body>
</html>
```
该代码使用了jQuery库,并定义了一个JSON对象 `data` 存储省市区县数据。在页面加载时,通过遍历 `data` 动态生成省市区县选择框,并使用jQuery编写了一些事件处理函数,实现了你的需求。
阅读全文