editTable05.jpg

      
 
是什么原因造成上面这个bug呢？因为在文本框中插入单元格之后，文本框是属于单元格的，我们点击文本框时，同样会触发单元格的click事件。
我们需要阻止文本框的点击行为（阻止事件冒泡）。
Code6:
复制代码 代码如下:
inputobj.click(function(){
return false;
});

但是点击单元格的边框时，还是会出现上述的bug,那我们做如下判断：如果单元格中已经插入了文本框，就跳出click事件。
Code7:
复制代码 代码如下:
$(document).ready(function(){
//找到学号这一列的所有单元格
//因为学号这一列的单元格在所有td中的位置是偶数（0,2,4,6），所以通过even就可以筛选到td中偶数位的单元格
var numTd = $("tbody td:even");
//单击这些td时，创建文本框
numTd.click(function(){
//创建文本框对象
var inputobj = $("<input type='text'>");
//获取当前点击的单元格对象
var tdobj = $(this);
//获取单元格中的文本
var text = tdobj.html();
//如果当前单元格中有文本框，就直接跳出方法
//注意：一定要在插入文本框前进行判断
if(tdobj.children("input").length>0){
return false;
}
//清空单元格的文本
tdobj.html("");
inputobj.css("border","0")
.css("font-size",tdobj.css("font-size"))
.css("font-family",tdobj.css("font-family"))
.css("background-color",tdobj.css("background-color"))
.css("color","#C75F3E")
.width(tdobj.width())
.val(text)
.appendTo(tdobj);
inputobj.get(0).select();
//阻止文本框的点击事件
inputobj.click(function(){
return false;
});
});
});

上面的bug解决了，但是我发现，点击单元格时，虽然从表面上看文字是变了色，但没有让我觉得它是能被编辑的。那么我就做一点点的改动，插入文本框的同时，选中文本框的文本。
Code 8:
复制代码 代码如下:
inputobj.get(0).select();

但是问题又来了，在Safari浏览器中，要让文本框处于选中状态，必须显得让文本框获得焦点。而我们这里只是在点击单元格时，插入文本框并给文本框赋值，文本框并没有获得焦点。解决的方法：通过jQuery的trigger方法来触发某个事件。
Code9:
复制代码 代码如下:
inputobj.trigger("focus").trigger("select");

三、文本框按键事件处理
以上的这些问题解决了，那我们就再来给文本框添加一些按键事件。我们知道不同的浏览器中获取按键的keyCode是不同的，但是jQuery帮我们解决了这个问题。
只需要在事件的function中加入event参数，然后在方法体中，通过event对象的which属性就能获得keyCode,event.which属性同化了不同浏览器获取keyCode的方法。
获得keyCode之后，我主要做两个按键事件：ESC键(键值：27)和Enter键(键值：13)。
Code10:
复制代码 代码如下:
//处理文本框上回车和esc按键的操作
//jQuery中某个事件方法的function可以定义一个event参数，jQuery会屏蔽浏览器的差异，传递给我们一个可用的event对象
inputobj.keyup(function(event){
//获取当前按键的键值
//jQuery的event对象上有一个which的属性可以获得键盘按键的键值
var keycode = event.which;
//处理回车的情况
if(keycode==13){
//获取当前文本框的内容
var inputtext = $(this).val();
//将td的内容修改成文本框中的内容
tdobj.html(inputtext);
}
//处理esc的情况
if(keycode == 27){
//将td中的内容还原成text
tdobj.html(text);
}
});

下面是完整的js代码：
Code11:
复制代码 代码如下:
$(document).ready(function(){
//找到学号这一列的所有单元格
//因为学号这一列的单元格在所有td中的位置是偶数（0,2,4,6），所以通过even就可以筛选到td中偶数位的单元格
var numTd = $("tbody td:even");
//单击这些td时，创建文本框
numTd.click(function(){
//创建文本框对象
var inputobj = $("<input type='text'>");
//获取当前点击的单元格对象
var tdobj = $(this);
//获取单元格中的文本
var text = tdobj.html();
//如果当前单元格中有文本框，就直接跳出方法
//注意：一定要在插入文本框前进行判断
if(tdobj.children("input").length>0){
return false;
}
//清空单元格的文本
tdobj.html("");
inputobj.css("border","0")
.css("font-size",tdobj.css("font-size"))
.css("font-family",tdobj.css("font-family"))
.css("background-color",tdobj.css("background-color"))
.css("color","#C75F3E")
.width(tdobj.width())
.val(text)
.appendTo(tdobj);
inputobj.get(0).select();
//阻止文本框的点击事件
inputobj.click(function(){
return false;
});
//处理文本框上回车和esc按键的操作
//jQuery中某个事件方法的function可以定义一个event参数，jQuery会屏蔽浏览器的差异，传递给我们一个可用的event对象
inputobj.keyup(function(event){
//获取当前按键的键值
//jQuery的event对象上有一个which的属性可以获得键盘按键的键值
var keycode = event.which;
//处理回车的情况
if(keycode==13){
//获取当前文本框的内容
var inputtext = $(this).val();
//将td的内容修改成文本框中的内容
tdobj.html(inputtext);
}
//处理esc的情况
if(keycode == 27){
//将td中的内容还原成text
tdobj.html(text);
}
});
});
});

相关文档打包下载