JQuery绑定双击事件实现table表中数据的修改
1. 利用JQuery的中的双击事件，失去焦点和获得焦点事件；
2. 当发生双击事件时，实现文本编辑的功能
3. 同时，文本框获得焦点事件，把表中td原来的数据写入文本框中
4. 当文本框中的内容发生改变失去焦点时，自动保存
| 姓名 | 年龄 | 爱好 | 地址 |
|---|---|---|---|
| 狂铁 | 2 | 激发电流 | 北京 |
| 弈星 | 3 | 法术伤害 | 北京 |
| 裴擒虎 | 2 | 提升等级 | 北京 |
| 杨玉环 | 2 | 切换曲调 | 北京 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery-migrate-1.0.0.js"></script>
<script>
//存储数据
function saveDate(obj) {
$(obj).parent().html($(obj).val());
};
$(function () {
$("td").dblclick(function () {
//获取td中原来的数据
var oldVlaue = $(this).html();
//文本框失去焦点时，调用方法存储数据
//把input封装为一个js对象
var input = $("<input οnblur='saveDate(this)'>");
//双击事件发生时，利用JQ对象添加一个input文本框
$(this).html(input);
//获取焦点时，将input中的值改为原来td中的值
$(input).focus();
$(input).val(oldVlaue);
});
})
</script>
</head>
<body>
<table border="1" style="width: 50%">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
<th>地址</th>
</tr>
<tr>
<td>狂铁</td>
<td>2</td>
<td>激发电流</td>
<td>北京</td>
</tr>
<tr>
<td>弈星</td>
<td>3</td>
<td>法术伤害</td>
<td>北京</td>
</tr>
<tr>
<td>裴擒虎</td>
<td>2</td>
<td>提升等级</td>
<td>北京</td>
</tr>
<tr>
<td>杨玉环</td>
<td>2</td>
<td>切换曲调</td>
<td>北京</td>
</tr>
</table>
</body>
</html>
var input = $("<input onblur='saveDate(this)'>");
这里把input标签封装为一个JS对象，方便操作
扫一扫
318
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
