实现可编辑的表格,如某一单元格点击后变成输入框,输入完成后按回车,或失去焦点时又变为文本。其实现的基本思路是:
1、当点击某一单元格时,将此单元格的文字保存起来。
2、清除此文字。即单元格的文字。
3、生成一个文本框,将其值设为保存的文本值。
4、给该文本框添加事件,如按键,如失去焦点事件。
4.1、事件主要处理当按下某一特殊键如Enter或失去焦点时,将输入框的值重新存为单元格的值。
4.2、事件中还有一步非常重要,即再次调用单元格的单击事件。因为第----步已经对单元格释放了该事件。
5、将该文本框追加给单元格
6、给单元格取消单元事件。如不取消的话,生成的文本框也会有此单击事件,这样一来,等第二次单击文本框时里面的值就没有了。
现将JS代码贴出来:
$(document).ready(function(){ var tds = $('td'); tds.click(tdclick); }); function tdclick(){ var td = $(this); var text = td.text(); td.html(''); var input = $('<input>'); //input.val(text);这样也可以实现 input.attr('value',text); input.keyup(function (event){ var myEvent = event||window.Event; var keyCode = myEvent.keyCode; //alert(keyCode) if (keyCode==13) {//判断是否为按下Enter var inputNode = $(this); var inputText = inputNode.val(); td.html(inputText); td.click(tdclick); } else if(keyCode==27){//判断是否为按下Esc var inputNode = $(this); inputNode.attr('value',text); } }); //文本框失去焦点时,重新变回文本,文本内容为输入框中的值 input.blur(function(){ td.html(input.val()); td.click(tdclick); }); td.append(input); var inputDom = input.get(0);//将jquery对象转化为DOM对象 inputDom.select(); td.unbind('click');//当出现文本框时再单出不需要再调用单击函数tdclick }
此篇涉及的代码见附件。