js表格 JS制作可编辑表格来源: 发布时间:星期三, 2008年5月28日 浏览:842次 评论:0
来源:曹映辉的专栏 - CSDNBlog
<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; } //用单元格的值来填充文本框的值 input.value=currentCell.innerHTML; //当文本框丢失焦点时调用last input.onblur=last; currentCell.innerHTML=""; //把文本框加到当前单元格上. currentCell.appendChild(input); } function last() ...{ //充文本框的值给当前单元格 currentCell.innerHTML = input.value; } //最后为表格绑定处理方法. document.getElementById("editTable").ondblclick=editCell; </script> 双击表格的单元格后出现一个文本框,用户编辑完成后将用户添的值重新给这个单元格。该功能结合Ajax可以在同一个页面上完成对数据的修改功能,非常实用。 0
相关文章读者评论
发表评论 |