JS制作可编辑表格
<html><head><title></title></head><body> <table id="editTable" border="1"> <tr> <td>aaaaaaa</td> <td>bbbbbbb</td> <td>ccccccc</td> </tr> <tr> <td>ddddddd</td> <td>eeeeeee</td> <td>fffffff</td> </tr> <tr> <td>gggggggg</td> <td>hhhhhhhh</td> <td>iiiiiiii</td> </tr> </table></body></html><script> //dom创建文本框 var input = document.createElement("input"); input.type="text" ; //得到当前的单元格 var currentCell ; function editCell(event)
{
if(event==null)
{
currentCell=window.event.srcElement;
} else { currentCell=event.target; } //根据Dimmacro 的建议修定下面的bug 非常感谢 if(currentCell.tagName=="TD"){ //用单元格的值来填充文本框的值 input.value=currentCell.innerHTML; //当文本框丢失焦点时调用last input.onblur=last; input.ondblclick=last; currentCell.innerHTML=""; //把文本框加到当前单元格上. currentCell.appendChild(input); //根据liu_binq63 的建议修定下面的bug 非常感谢 input.focus(); }
} function last() { //充文本框的值给当前单元格 currentCell.innerHTML = input.value; } //最后为表格绑定处理方法. document.getElementById("editTable").ondblclick=editCell;</script>
双击表格的单元格后出现一个文本框，用户编辑完成后将用户添的值重新给这个单元格。该功能结合Ajax 可以
同一个页面上完成对数据的修改功能，非常实用。
