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 = ateElement("input");
//得到当前的单元格
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
currentCell.innerHTML="";
//把⽂本框加到当前单元格上.
currentCell.appendChild(input);
//根据liu_binq63 的建议修定下⾯的bug ⾮常感谢
input.focus();
}
}
function last()
{
//充⽂本框的值给当前单元格
currentCell.innerHTML = input.value;
}
//最后为表格绑定处理⽅法.
</script>
input绑定onblur事件双击表格的单元格后出现⼀个⽂本框，⽤户编辑完成后将⽤户添的值重新给这个单元格。该功能结合Ajax 可以同⼀个页⾯上完成对数据的修改功能，⾮常实⽤。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。