鼠标双击Table单元格变成文本框

最新推荐文章于 2025-12-17 10:07:46 发布

原创最新推荐文章于 2025-12-17 10:07:46 发布 · 793 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#table #function #border #input #测试

本文介绍了一种通过双击鼠标来激活表格单元格编辑状态的方法。该方法使用JavaScript实现，能够将表格中的静态文本转换为可编辑的输入框，完成编辑后再将内容转回静态显示。适用于需要频繁更新表格内容的应用场景。

<html>
<head>
<title>网页特效 双击鼠标修改表格内容</title>
</head>
<body>
<script language="javascript">
// 将单元格转化成文本框
function changeTotext(obj)
{ 
    var tdValue = obj.innerText;
    obj.innerText = "";
    var txt = document.createElement("input");
    txt.type = "text";
    txt.value = tdValue;
    txt.id = "_text_000000000_";
    txt.setAttribute("className","text");
    obj.appendChild(txt);
    txt.select();
    //obj.style.border = "1px dashed #ff9900";
}
 // 取消单元格中的文本框，并将文本框中的值赋给单元格
function cancel(obj)
{
    var txtValue = document.getElementById("_text_000000000_").value;
    obj.innerText = txtValue;
}
/*********************************************/
// 事件
document.ondblclick = function()
{
    if (event.srcElement.tagName.toLowerCase() == "td")
    {
        changeTotext(event.srcElement);
    }
}
document.onmouseup = function()
{
    if (document.getElementById("_text_000000000_") && event.srcElement.id != "_text_000000000_")
    {
        var obj = document.getElementById("_text_000000000_").parentElement;
        cancel(obj);
    }
} 
</script>
<table width="50%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>测试内容</td>
  </tr>
</table>
</body>
</html>