利用jQuery制作可编辑的表格
html代码：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>edit</title> <script type="text/javascript" src="jslib/jquery.js"></script> <script type="text/javascript" src="jslib/jqueryedit.js"></script> <link rel="stylesheet" href="css/edit.css" type="text/css" /></head><body> <table> <tbody> <tr> <td>absd</td><td>werwe</td> </tr> </tbody> </table></body></html>
css代码：edit.css
table,td{ border-collapse:collapse; border:1px solid cadetblue;}
js代码：jqueryedit.js
$(document).ready(function() { $("td").one("click", tdClick);});function tdClick() { var tdObj = $(this); var tdValue = tdObj.text(); tdObj.html(""); var input = $("<input>"); input.attr("value", tdValue); input.one("keyup", function(event) { //解决不同浏览器获取事件对象的差异 var myEvent = event || window.event; var kCode = myEvent.keyCode; if (kCode == 13) { var inputVal = input.val(); tdObj.html(inputVal); //重新注册td上的点击时间 tdObj.one("click", tdClick); } }); tdObj.append(input); //将jQuery对象转换成dom对象 var inputDom = input.get(0); //然文本框里面的内容选中 inputDom.select(); //消除td上的点击时间 //tdObj.unbind();}
页:
[1]