(1)效果:点击表格中任意一个格,表格变为可编辑的输入框,改变后取消此选中表格的点击事件,然后如果按回车键,则将改正后的文本保存在此表格中,按一下回车后恢复点击事件。
(2)涉及知识点:获取当前用户按下键得键码方法
首先火狐需要将方法中传入一个event参数,通过keyCode方法获取当前输入的键码
js代码:
//在页面装载时,让所有的td都拥有一个点击事件
$(document).ready(function() {
//找到所有的td节点
var tds = $("td");
//给所有的td节点增加点击事件
tds.click(tdclick);
});
//td被点击的事件
function tdclick() {
//0.保存当前的td节点
var td = $(this);
//1.取出当前td中的文本内容保存起来
var text = td.text();
//2.清空td里面的内容
td.html(""); //也可以用td.empty();
//3.建立一个文本框,也就是input的元素节点
var input = $("<input>");
//4.设置文本框的值是保存起来的文本内容
input.attr("value", text);
//4.5让文本框可以响应键盘按下并弹起的事件,主要用于处理回车确认
input.keyup(function(event) {
//0.获取当前用户按下的键值
//解决不同浏览器获取事件对象的差异
var myEvent = event || window.event;
var kcode = myEvent.keyCode;
//1.判断是否是回车按下
if (kcode == 13) {
var inputnode = $(this);
//2.保存当前文本框的内容
var intputext = inputnode.val();
//3.清空td里面的内容
var tdNode = inputnode.parent();
//4。将保存的文本框的内容填充到td中
tdNode.html(intputext);
//5.让td重新拥有点击事件
tdNode.click(tdclick);
}
});
//5.将文本框加入到td中
td.append(input); //也可以用input.appendTo(td)
//5.5让文本框里面的文字被高亮选中
//需要将jquery的对象转换成dom对象
var inputdom = input.get(0);
inputdom.select();
//6.需要清除td上的点击事件
td.unbind("click");
}