原生js表格即时编辑

<! 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 >