<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<table border="1" width="500" align="center" class="tab">
<tr>
<td>DATA</td>
<td>DATA</td>
<td>DATA</td>
<td>DATA</td>
</tr>
<tr>
<td>DATA</td>
<td>DATA</td>
<td>DATA</td>
<td>DATA</td>
</tr>
<tr>
<td>DATA</td>
<td>DATA</td>
<td>DATA</td>
<td>DATA</td>
</tr>
<tr>
<td>DATA</td>
<td>DATA</td>
<td>DATA</td>
<td>DATA</td>
</tr>
</table>
</body>
<script>
var atd = document.querySelectorAll(".tab td");
for(var i=0;i<atd.length;i++){
atd[i].onclick = function(){
// 點擊td時創建輸入框
var ipt = document.createElement("input");
// 將輸入框的內容設置爲td的內容
ipt.value = this.innerHTML;
// 將td清空
this.innerHTML = "";
// 吧ipt插入進去
this.appendChild(ipt);
// 自動獲取焦點
ipt.focus();
// 爲了防止ipt被點擊時，事件的冒泡重複執行td的點擊，所以取消冒泡
ipt.onclick = function(eve){
var e = eve || window.event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}
// 提前保存，外面的this
var that = this;
ipt.onblur = function(){
// 當ipt失去焦點時，將輸入框的內容設置給td，同時刪除輸入框
that.innerHTML = this.value;
}
}
}
</script>
</html>
![]()
