实例——表格的相关操作：添加行，删除行，编辑单元格

html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>汇总</title>

<style>
#tablebox{width: 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加上点击事件
}

实例——表格的相关操作：添加行，删除行，编辑单元格

猜你喜欢