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

最新推荐文章于 2021-06-17 11:47:49 发布

QQQ2556338777

最新推荐文章于 2021-06-17 11:47:49 发布

阅读量194

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/dcrenl/archive/2012/01/13/3365191.html

版权

<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>

转载于:https://www.cnblogs.com/dcrenl/archive/2012/01/13/3365191.html