怎样让你的表格可编辑？？？-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_18102/article/details/81733446

本文提供了一个HTML页面示例，展示了如何通过JavaScript实现表格中单元格内容的在线编辑功能。此功能允许用户直接点击单元格进行修改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<HTML>
<HEAD>
<STYLE>
.td1 { color: white; background-color: orange;}
.td2 { color: white; background-color: #0099ff;}
.td3 { color: white; background-color: #336699;}
</STYLE>
<SCRIPT>
function editCell (cell) {
if (document.all) {
cell.innerHTML = '<INPUT ID="editCell"
ONCLICK="event.cancelBubble = true;"
ONCHANGE="setCell(this.parentElement, this.value)"
ONBLUR="setCell(this.parentElement, this.value)"
VALUE="' + cell.innerText + '"
SIZE="' + cell.innerText.length + '">';
document.all.editCell.focus();
document.all.editCell.select();
}
else if (document.getElementById) {
cell.normalize();
var input = document.createElement('INPUT');
input.setAttribute('value', cell.firstChild.nodeValue);
input.setAttribute('size', cell.firstChild.nodeValue.length);
input.onchange = function (evt) {
setCell(this.parentNode, this.value); };
input.onclick = function (evt) {
evt.cancelBubble = true;
if (evt.stopPropagation)
evt.stopPropagation();
};
cell.replaceChild(input, cell.firstChild);
input.focus();
input.select();
}
}
function setCell (cell, value) {
if (document.all)
cell.innerText = value;
else if (document.getElementById)
cell.replaceChild(document.createTextNode(value), cell.firstChild);
}
</SCRIPT>
</HEAD>
<BODY>
<TABLE BORDER="2">
<TR>
<TD ONCLICK="editCell(this);" CLASS="td1">欢迎光临</TD>
<TD ONCLICK="editCell(this);" CLASS="td2">[孟宪会之精彩世界]</TD>
<TD ONCLICK="editCell(this);" CLASS="td3">http://lucky.myrice.com</TD>
</TR>
</TABLE>
</BODY>
</HTML>
**************************************
这个网址也不错---->http://hi.baidu.com/senty/blog/item/0b0a8226797112128b82a152.html/cmtid/52ef510f7504b3206159f3cf
**************************************

本文来自优快云博客，转载请标明出处：http://blog.youkuaiyun.com/net_lover/archive/2001/06/27/6869.aspx