js和jQuery实现双击表格变为可编辑状态

看到别人的代码，自己分析加的备注，直接上代码！

body { font-size: 12px; } td { border-width: 1px; border-top-style: solid; border-right-style: none; border-bottom-style: none; border-left-style: solid; text-align: center; width: 25%; height: 20px; } table { border-width: 1px; border-right-style: solid; border-bottom-style: solid; border-top-style: none; border-left-style: none; border-color: #000; } .text { width: 95%; border: 1px dashed #FF9900; }

/*......................................................................................................................*/

/*   修改的id值和单元格的值，可转成json串 用ajax提交数据到后台，后台解析json，更新数据库 */ // 将单元格转化成文本框  function changeTotext(obj) { //获取标签内的文本值 var tdValue = obj.innerText; alert(tdValue); obj.innerText = ""; //创建input标签对象 var txt = document.createElement("input"); txt.type = "text"; //将文本值赋给input的value txt.value = tdValue; //新建input的id值(可以用数据库的ID值) txt.id = "_text_000000000_"; //添加input节点，并放到td中 obj.appendChild(txt); //选取域中的文本（双击时文本全选） txt.select(); //双击之后改变样式 //单元格边框样式 obj.style.border = "1px dashed #ff9900";  //input标签边框 txt.style.border = "0px"; txt.style.outline = "none"; } // 取消单元格中的文本框，并将文本框中的值赋给单元格  function cancel(obj) { var txtValue = document.getElementById("_text_000000000_").value; //更改之后的值 obj.innerText = txtValue; } /*********************************************/ // 事件  document.ondblclick = function() { //取得标签属性 if (event.srcElement.tagName.toLowerCase() == "td") { //获得触发事件的元素 //对象 changeTotext(event.srcElement); } } //当鼠标抬起执行 document.onmouseup = function() { if (document.getElementById("_text_000000000_") && event.srcElement.id != "_text_000000000_") { var obj = document.getElementById("_text_000000000_").parentElement; cancel(obj); } } dblclick eqweqwe qeqe ewqeq

http://blog.mn886.net/jqGrid/

可以去jqgrid的demo详细查看