您的位置：Web开发->JS制作可编辑表格

JS制作可编辑表格2008-05-28 来自：lizhe1985  [收藏到我的网摘]

来源：曹映辉的专栏 - 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可以在同一个页面上完成对数据的修改功能，非常实用。

推荐人评论

双击表格的单元格后出现一个文本框，用户编辑完成后将用户添的值重新给这个单元格。该功能结合Ajax可以在同一个页面上完成对数据的修改功能，非常实用。

用户评论

正在载入评论列表...