cnblogs.com的html文件

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

@@ -0,0 +1,55 @@
+<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>