cnblogs/dcrenl/鼠标双击Table单元格变成文本框.html

<pre name="code" class="html">&lt;html&gt;
&lt;head&gt;
&lt;title&gt;网页特效 双击鼠标修改表格内容&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;script language="javascript"&gt;
// 将单元格转化成文本框
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_") &amp;&amp; event.srcElement.id != "_text_000000000_")
    {
        var obj = document.getElementById("_text_000000000_").parentElement;
        cancel(obj);
    }
} 
&lt;/script&gt;
&lt;table width="50%" border="0" align="center" cellpadding="0" cellspacing="0"&gt;
  &lt;tr&gt;
    &lt;td&gt;测试内容&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<pre name="code" class="javascript"><br />
</pre>
<pre></pre>