js實現雙擊單元格變成文本輸入框效果代碼

2019-11-21 01:46:07

字體：大中小

來源：轉載

供稿：網友

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>單擊單元格，將其變為文本框</title> <style type="text/css">  </style> <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> </head> <body> <table width="50%" border="0" align="center" cellpadding="0" cellspacing="0">   <tr>     <td>dblclick</td>     <td> </td>     <td> </td>     <td> </td>   </tr>   <tr>     <td> </td>     <td> </td>     <td> </td>     <td> </td>   </tr>   <tr>     <td> </td>     <td> </td>     <td> </td>     <td> </td>   </tr>   <tr>     <td> </td>     <td> </td>     <td> </td>     <td> </td>   </tr>   <tr>     <td> </td>     <td> </td>     <td> </td>     <td> </td>   </tr> </table> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：js通用滑動門類

下一篇：javascript點擊才出現驗證碼