|
javascript制作的这个可编辑表格，只要双击表格的单元格后出现一个文本框，用户编辑完成后将用户添的值重新给这个单元格。该功能结合Ajax 可以同一个页面上完成对数据的修改功能，非常实用。
<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);
input.focus();
}
function last()
{
//充文本框的值给当前单元格
currentCell.innerHTML = input.value;
}
//最后为表格绑定处理方法.
document.getElementById("editTable").ondblclick=editCell;
</script>
| 
