存在冒泡事件待修改
<!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>及时编辑表格</title>
<style>
span{
height: 100%;
width: 100%;
background: #f99;
display: inline-block;
}
</style>
</head>
<body>
<table border="1px" cellspacing="0" align="center" width="400px" >
<tbody>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tbody>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td><span>删除</span></td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td><span>删除</span></td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td><span>删除</span></td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td><span>删除</span></td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td><span>删除</span></td>
</tr>
</table>
</body>
<script>
//获取元素
var otd = document.querySelectorAll( 'td');
var spans = document.querySelectorAll('span');
// console.log( otd[0].textContent )
for( var i = 0; i < otd.length; i++){
otd[i].onclick = function(){
var val = this.innerHTML;
this.innerHTML = '';
var inp = document.createElement('input');
this.appendChild( inp );
inp.value = val;
inp.focus();
var that = this;
inp.onblur = function(){
var val = this.value;
inp.remove();
that.innerHTML = val;
}
}
}
for( var i = 0; i <spans.length;i++){
spans[i].onclick = function(){
this.parentNode.parentNode.remove();
}
}
</script>
</html>
