jQuery学习记录----可编辑的表格(六)
实现可编辑的表格,如某一单元格点击后变成输入框,输入完成后按回车,或失去焦点时又变为文本。其实现的基本思路是:
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) {//判断是否为按下Entervar inputNode = $(this);var inputText = inputNode.val();td.html(inputText);td.click(tdclick);}else if(keyCode==27){//判断是否为按下Escvar 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}
?
此篇涉及的代码见附件。