双击单元格修改内容

浏览数：42 / 时间：2015年06月09日

//因为项目中用到：双击某个区域直接修改内容，然后保存提交。 比如双击 表格字段，直接变成可修改，修改完之后，单击其他区域，自动保存。

<html>
<head>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>网页特效 双击鼠标修改表格内容 www.mrhso.com 提供</title>
<style type="text/css">
<!--
body{font-size:12px;}
td {
    border-width: 1px;
    border-top-style: solid;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: solid;
    text-align: center;
    width: 25%;
    height: 25px;
}
table {
    border-width:1px;
    border-right-style: solid;
    border-bottom-style: solid;
    border-top-style: none;
    border-left-style: none;
    border-color:#000;
}
.text { width: 95%;border: 1px dashed #FF9900; }
-->
</style>
</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 = "txt_001";
    txt.setAttribute("className","text");
    obj.appendChild(txt);
    txt.select();
    //obj.style.border = "1px dashed #ff9900";
}
 // 取消单元格中的文本框，并将文本框中的值赋给单元格
function cancel(obj)
{
    var txtValue = document.getElementById("txt_001").value;
    obj.innerText = txtValue;
}
/*********************************************/
// 事件
document.ondblclick = function()
{
    if (event.srcElement.tagName.toLowerCase() == "td")
    {
        changeTotext(event.srcElement);
    }
}
document.onmouseup = function()
{
    if (document.getElementById("txt_001") && event.srcElement.id != "txt_001")
    {
        var obj = document.getElementById("txt_001").parentElement;
        cancel(obj);
    }
} 
</script>
<table width="50%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>双击我看看，我会变成输入框，你可以直接修改</td>
  </tr>
</table>
</body>
</html>