可以利用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{ 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>