实例
<!DOCTYPE html>
<html lang="zh">
<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 id="mytab" border="1" width="800" align="center">
<tr>
<td>ID</td>
<td>Name</td>
<td>Sex</td>
<td>Age</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>男</td>
<td>19</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>男</td>
<td>19</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>男</td>
<td>19</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>男</td>
<td>19</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>男</td>
<td>19</td>
</tr>
</table>
</body>
<script type="text/javascript">
//获取表格对象
var tb = document.getElementById('mytab');
//遍历出表格和单元格
for(var i=1;i<tb.rows.length;i++){
//循环出所有的表格
for(var j=0;j<tb.rows[i].cells.length;j++){
tb.rows[i].cells[j].onclick = function(){
//使得这个被点击的事件变成一个input标签
this.innerHTML = '<input type="text" value="'+this.innerHTML+'" id="inp">';
//获取到双击添加的文本框时间
var inp = document.getElementById('inp');
//获取焦点事件
inp.focus();
//失去焦点事件
inp.onblur = function(){
//需要将当前input理念的内容防止到td当中
this.parentNode.innerHTML = this.value;
}
}
}
}
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
