JQERYU编写一个学生信息表将学号姓名输入好性别籍贯和爱好选择好后提交到表格中
时间: 2024-03-17 20:45:45 浏览: 75
一个 Student类:包括姓名、学号、性别、专业、家庭地址。
好的,可以使用HTML和JavaScript来实现这个功能。以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>学生信息表</title>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#submit-btn").click(function(){
var stuId = $("#stu-id").val();
var stuName = $("#stu-name").val();
var gender = $("input[name='gender']:checked").val();
var hometown = $("#hometown").val();
var hobby = $("#hobby").val();
var newRow = "<tr><td>" + stuId + "</td><td>" + stuName + "</td><td>" + gender + "</td><td>" + hometown + "</td><td>" + hobby + "</td></tr>";
$("#info-table").append(newRow);
});
});
</script>
</head>
<body>
<h1>学生信息表</h1>
<form>
<label>学号:</label>
<input type="text" id="stu-id"><br>
<label>姓名:</label>
<input type="text" id="stu-name"><br>
<label>性别:</label>
<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女">女<br>
<label>籍贯:</label>
<input type="text" id="hometown"><br>
<label>爱好:</label>
<textarea id="hobby"></textarea><br>
<input type="button" id="submit-btn" value="提交">
</form>
<table id="info-table" border="1">
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>籍贯</th>
<th>爱好</th>
</tr>
</table>
</body>
</html>
```
这个代码中包含一个表单和一个表格。当用户填写好表单后,点击提交按钮,就会将所填写的学生信息添加到表格中。具体实现可以参考代码中的JavaScript部分。
阅读全文