<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>Title</title>
</head>
<body>
姓名：<input type="text" id="usename"><br>
性别：<input type="text" id="content"><br>
作者：<input type="text" id="author"><br>
<button id="btn">保存</button>
<table border=1 id="tab" >
???<th>序列号</th> ???<th>用户名</th> ???<th>性别</th> ???<th>作者</th> ???<th>时间</th> ???<th>详细内容</th> ???<th>删除</th>
???<tr> ???<td>24</td><td>kaw</td><td>男</td> ???<td>牛批</td><td>2018-05-17</td><td> ???<a href="#">详细内容</a></td><td><a href="#" class="del">删除</a></td></tr>
???<tr><td>24</td><td>kaw</td><td>男</td><td>牛批</td><td>2018-05-17</td><td> ???<a href="#">详细内容</a></td><td><a href="#" class="del">删除</a></td></tr>
???<tr><td>24</td><td>kaw</td><td>男</td><td>牛批</td><td>2018-05-17</td><td> ??<a href="#">详细内容</a></td><td><a href="#" class="del">删除</a></td></tr> ???
</table>
</body>
</html>
<script src="pool.js"></script>
<script>
???var _name=document.getElementById("usename");
???var content=document.getElementById("content");
???var author=document.getElementById("author");
???var obtn=document.getElementById("btn");
???var otab=document.getElementById("tab");
???otab.style.borderSpacing="0"
???obtn.onclick=function(){
???????var d=new Date();
???????var oname=_name.value;
???????var ocontent=content.value;
???????var oauthor=author.value;
???????var str=‘‘;
???????str+="<tr><td>"+numRandom(1,100)+"</td><td>"+oname+"</td><td>"+ocontent+"</td><td>"+oauthor+"</td><td>"+dateString(d)+"</td><td><a href=‘#‘>详细内容</a></td><td><a href=‘#‘ class=‘del‘>删除</a></td></tr>"
???????otab.innerHTML+=str;
???}
???otab.onclick=function(e){
???????var e=e||event;
???????var target= e.target|| e.srcElement;
???????if(target.tagName=="A" && target.className=="del"){
???????????target.parentNode.parentNode.remove();
???????}
???????if(target.tagName=="TD" && target.tagName!="A"){
???????????var input=document.createElement("input");
???????????input.type="text";
???????????input.value=target.innerHTML;
???????????target.replaceChild(input,target.firstChild);
???????????input.onblur=function(){
???????????????this.parentNode.value=this.value;
???????????????this.style.border="none"
?????????????
???????????}
???????}
???}
</script>
原生js表格即时编辑
原文地址：https://www.cnblogs.com/yunshangwuyou/p/9710870.html