表格的即时编辑
可以利用DOM操作，来进行表格的即时编辑
<!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>
<style>
table{margin: 20px auto;}
td{width: 100px;height: 30px;border: 1px solid black;text-align: center;line-height: 30px;font-size: 20px;}
</style>
</head>
<body>
<table>
<tbody>
<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>
</tbody>
</table>
</body>
<script>
otb = document.querySelector("table");
otb.onclick = function(eve){
var e = eve || window.event;
//获取事件目标
var tgt = e.target || e.srcElement;
//点哪个td，执行哪个
if(tgt.nodeName == "TD"){
var input = document.createElement("input");
input.type = "text";
input.value = tgt.innerHTML;
tgt.innerHTML = "";
tgt.appendChild(input);
//失去焦点时
input.onblur = function(){
tgt.innerHTML = input.value;
}
}
}
</script>
</html>
浙公网安备 33010602011771号