1.点击文字变为文本框
2.文本框自动全选文字
3.对文本框内容进行修改
4.点击文本框以外的地方文本框再次变为修改后的文字
5.同步更新SQL数据库内容
Html部分代码
复制代码 代码如下:
| ID | 名称 | 操作 |
| 1 | 哈哈 | 删除 |
| 2 | 哈哈 | 删除 |
| 3 | 哈哈 | 删除 |
新建edit.js文件，代码如下
复制代码 代码如下:
$(function() {
//获取class为caname的元素
$(".caname").click(function() {
var td = $(this);
var txt = td.text();
var input = $("");
td.html(input);
input.click(function() { return false; });
//获取焦点
input.trigger("focus");
//文本框失去焦点后提交内容，重新变为文本
input.blur(function() {
var newtxt = $(this).val();
//判断文本有没有修改
if (newtxt != txt) {
td.html(newtxt);
}
else
{
td.html(newtxt);
}
});
});
});
Html头部引用jq类库文件和自己写的edit.js文件，注意顺序
复制代码 代码如下:
