《Javaweb---JQuery实现可编辑的表格》
问题仔细找,总会找到的。
<!DOCTYPE html><html> <head> <title>简单的可编辑表格</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> td {border: 1px red solid;cursor: pointer;} </style> <script type="text/javascript" src="jslib/jquery.js"></script> <script type="text/javascript" src="jslib/edit.js"></script> <!-- <link rel="stylesheet" type="text/css" href="css/edit.css"> --> </head> <body> <table> <tr> <td>123</td> <td>456</td> </tr> </table> </body></html>
//当页面加载时执行此方法$(document).ready(function(){var tds = $("td");//对所有的td注册点击事件tds.click(tdclick);});function tdclick() {var td = $(this); //保存td中的文本数据var text = td.text();//清空td中的数据td.text("");//利用JQuery插入一个input标签var input = $("<input>");//设置input标签中的值input.attr("value",text);//给input注册键盘按下弹起事件input.keyup(function(event){//获取键盘按下的code值var key = event.keyCode;//判断是否是回车键if (key == 13){//获取input的value中值var ntext = $("input").val();//将input中的值赋给tdtd.html(ntext);//重新建立td点击事件td.bind("click",tdclick);}});//将input标签添加到td中td.append(input);//将input中的内容选中input.get(0).select();//取消td点击事件td.unbind("click",tdclick);}