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('网络错误,请稍后重试')
}
})
})
```
比如设置table的id为tabvar
trHTML
=
"..."
$("#tab").append(trHTML)//在table最后面添加一行
$("#tab
tr:eq(2)").after(trHTML)
//
在table的第3行后面添加一行
这样就可以进行动态的添加行了,至于你是通过什么事件来动态添加那就看你自己的意思了,通过button或者div之类的点击事件添加,只要把上面的两行代码放进去就ok,注意,要把var
trHTML那行代码放进添加事件里面,不然不管点击多少下,都只能添加一行
$(function()
{
$(":button").click(function()
{
var
tr
=
"new"
//$("table").append(tr)
$("table
tr:eq(2)").after(tr)
})
})
这是我测试用的代码,你可以运行看看
在使用Jquery+Ajax 往Table 中Td 添加入数据的方法如下:
在数据少的情况下直接给id或class传值,多行数据要用循环,代码如下:
$.post("", "data:getType", function (res) {
var date = Pase(res)
var str = ""
$.each(data.result, function (i, j) {
str += "<tr>"
str += "<td></td>"
str += "</tr>"
})
document.getElementById("tbody").add(str)
})
<table><tbody id="tbody"></tbody></table>
jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接 *** 作该函数,除非你需要 *** 作不常用的选项,以获得更多的灵活性。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)