jquery可编辑的表格
以下是一个简单的用jquery实现可编辑的表格
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title>可编辑的表格</title> <script type="text/javascript" src="jslib/jquery.js"></script> <script type="text/javascript" src="jslib/edit.js"></script> </head><body> <table border="1px"> <tbody> <tr> <td>123</td> <td>456</td> </tr> </tbody> </table></body></html>
其js代码为
$(document).ready(function(){ var tds = $("td"); tds.click(tdclick);});function tdclick(){ var td = $(this); //获得被点击的td所返回的jquery对象 var tdvalue = td.text(); //获得td的文本 td.html(""); //然后将td置空 var input = $("<input>"); //添加一个input标签 input.attr("value", tdvalue); //设置其属性value的值 input.keyup(function(event){ //为其注册键盘监听事件 var myevent = event || window.event; var keycode = myevent.keyCode; if(keycode == 13){ var inputNode = $(this); var inputvalue = inputNode.val(); var tdNode = inputNode.parent(); //得到其父节点 tdNode.html(inputvalue); tdNode.click(tdclick); //注册鼠标点击事件 } }); td.append(input); var inputdom = input.get(0); inputdom.select(); //让文本框里的文字选中 td.unbind("click");}