html代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>汇总</title> <style> #tablebox{ 70%;margin: 0 auto;border-spacing: 0;border-collapse:collapse;table-layout: fixed;} #tablebox td,#tablebox th{border: 1px solid #ddd;padding: 10px;text-align: center;} </style> <script src="js/edit.js"></script> </head> <body> <button id="btn">添加一行</button> <p>点击表格可以编辑内容</p> <table id="tablebox"> <tr> <th>操作</th> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </table> </html>
js代码:
var box=null,//表格 btn=null,//按钮 title=['姓名','性别','年龄']; //表头 window.onload=function(){ init(); //初始化变量 btn.onclick=add_line; //点击按钮添加一行 } //初始化 function init(){ box=document.getElementById('tablebox'); //表格 btn=document.getElementById('btn'); //按钮 num=box.getElementsByTagName('th').length; //th的数量,循环次数 } //添加行 function add_line(){ var tr=document.createElement('tr'); //创建tr var td=document.createElement('td'); //创建第一个td td.setAttribute('edit','no'); //第一个td加属性 var del=document.createElement('button'); //创建一个button del.innerHTML='删除'; //给button添加文字 td.appendChild(del); //把button添加到td中 tr.appendChild(td); //把td添加到tr中 del.onclick=function(){ //给button加事件 this.parentElement.parentElement.remove(); //父节点的父节点,是td,删除 } for(var i=1; i<num; i++){ //循环创建td,并添加到tr中 var td=document.createElement('td'); td.innerHTML=prompt('请输入'+title[i-1]); tr.appendChild(td); } box.appendChild(tr); //把tr添加到表格中 td_edit(); //td加点击事件 } //td加点击事件 function td_edit(){ var tds=document.getElementsByTagName('td'); //找到所有td for(var j=0; j<tds.length; j++){ var edit=tds[j].getAttribute('edit'); //获取td的edit属性 if(edit!='no'){ //不是第一个"删除"时 tds[j].setAttribute('onclick','add_input(this)'); //添加input事件 } } } //添加input function add_input(obj){ var str=obj.innerHTML; //取到td的内容 obj.innerHTML='<input type="text" onblur="add_con(this)" value="'+str+'"/>'; //把td的内容赋值给input,并把input加入td中,并添加一个失去焦点的事件 obj.getElementsByTagName('input')[0].select(); //input变成选中状态 obj.removeAttribute('onclick'); //移除td的事件 } //把编辑后的内容赋值给td function add_con(obj){ var str=obj.value; //input的value var this_td=obj.parentElement; //input的父标签td this_td.innerHTML=str; //td的内容为value this_td.setAttribute('onclick','add_input(this)'); //td加上点击事件 }