请编写html代码 用table显示学生信息 其中学生由学号,姓名,专业,班级构成请构造两条学生记录填入table

请编写html代码 用table显示学生信息 其中学生由学号,姓名,专业,班级构成请构造两条学生记录填入table,第1张

<table>

<tr>

<th>学号</th>

<th>姓名</th>

<th>专业</th>

<th>班级</th>

</tr>

<tr>

<td>201301</td>

<td>张三</td>

<td>会计</td>

<td>3班</td>

</毁饥tr>

<tr>

<纤弯返td>201305</td>

<td>李四</td>闹瞎

<td>电商</td>

<td>6班</td>

</tr>

</table>

实现修改并保存学生信息功能可以通过以下步骤:

1. 首先,需要用jQuery选择器选中要修改的学生信息的表单元素,例如表格或表单。

2. 为选中的余野表单元素绑定事件监听器,例如点击事件。

3. 在事件处理函数中,获取要修改的学生信息的数据,并将其填充到表单元素中,以方便用户修改。

4. 用户完成修改后,点击保存按钮,将表单数据提交给服务器进行保存。可以使用Ajax技术来实现异步提交表单数据。

5. 服务器返回保存结果,如果保存成功,可以使用jQuery提示框等方竖轿喊式提醒用户保存成功。

以下是示例代码:

HTML文件:

```

<table id="studentTable">

<tr>

<th>姓名</th>

<th>年龄</th>

<th>性别</th>

<th> *** 作</th>

</tr>

<tr>

<td>张三</td>

<td>20</td>

<td>男</td>

<td>

<button class="editBtn">编辑</button>

<button class="saveBtn" style="display: none">保存</button>

</td>

</tr>

<tr>

<td>李四</td>

<td>22</td>

<td>女</td>

<td>

<button class="editBtn">编辑</button>

<button class="saveBtn" style="display: none">保存</button>

</td>

</tr>

</table>

```

JavaScript文件:帆睁

```

$('.editBtn').click(function() {

// 获取要编辑的学生信息

var $tr = $(this).parents('tr')

var name = $tr.find('td:eq(0)').text()

var age = $tr.find('td:eq(1)').text()

var gender = $tr.find('td:eq(2)').text()

// 将学生信息填充到表单中

$tr.find('td:eq(0)').html('<input type="text" value="' + name + '">')

$tr.find('td:eq(1)').html('<input type="text" value="' + age + '">')

$tr.find('td:eq(2)').html('<input type="text" value="' + gender + '">')

$(this).hide()

$tr.find('.saveBtn').show()

})

$('.saveBtn').click(function() {

// 获取修改后的学生信息

var $tr = $(this).parents('tr')

var name = $tr.find('td:eq(0) input').val()

var age = $tr.find('td:eq(1) input').val()

var gender = $tr.find('td:eq(2) input').val()

// 提交表单数据到服务器

$.ajax({

url: '/api/saveStudentInfo',

type: 'post',

data: { name: name, age: age, gender: gender },

success: function(result) {

if (result.success) {

alert('保存成功')

// 将学生信息更新到表格中

$tr.find('td:eq(0)').text(name)

$tr.find('td:eq(1)').text(age)

$tr.find('td:eq(2)').text(gender)

$tr.find('.editBtn').show()

$tr.find('.saveBtn').hide()

} else {

alert('保存失败')

}

},

error: function() {

alert('网络错误,请稍后重试')

}

})

})

```

数据库中建3个表:

学生表(姓名,学号[主键],搜银单位)

课程表(课程编号[主键],名称,学时,开课老师)

选课表(课程编号,学号)两个都是主键都是外键。

三个表表示什么自己理解一下,查询的喊漏念时候就用sql语句,连接多个表查就行。比如 1.1

Select * from 课程表 where exists (select * from 选课表 where 学号=‘1234567890’ and 课程编号=课程表.课程编号)

这就查出了所有该学生选的课的信息。

至于怎么在html中郑困显示,还要看你用php 还是java做网页,然后把数据放到table里就行了。

不过所说的这些得知道 数据库 网页的知识,就简单了


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/11972941.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-20
下一篇2023-05-20

发表评论

登录后才能评论

评论列表(0条)

    保存