js实现双击单元格变成文本输入框效果代码_javascript技巧

来源：动视网责编：小采时间：2020-11-27 20:39:05

js实现双击单元格变成文本输入框效果代码_javascript技巧

js实现双击单元格变成文本输入框效果代码_javascript技巧: 单击单元格，将其变为文本框 // 将单元格转化成文本框 function changeTotext(obj) { var tdValue = obj.innerText; obj.innerText = ; var txt = document.createElement(input); txt.type =

推荐度：

点击下载本文 文档为doc格式

导读js实现双击单元格变成文本输入框效果代码_javascript技巧: 单击单元格，将其变为文本框 // 将单元格转化成文本框 function changeTotext(obj) { var tdValue = obj.innerText; obj.innerText = ; var txt = document.createElement(input); txt.type =

<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> 
 
// 将单元格转化成文本框 
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技巧

推荐度：

点击下载本文 文档为doc格式

标签：文本框实现 js

热门焦点

js实现双击单元格变成文本输入框效果代码_javascript技巧

js实现双击单元格变成文本输入框效果代码_javascript技巧

js实现双击单元格变成文本输入框效果代码_javascript技巧

最新推荐

猜你喜欢

热门推荐