• 实例——表格的相关操作:添加行,删除行,编辑单元格


    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加上点击事件
    }
    
  • 相关阅读:
    fidller 打断点
    随笔
    HTML标签介绍
    补充9.27----9.28
    html5_______9.26
    9.14
    9.13笔记
    9.12笔记
    CSS样式的引用
    html5_______9.10
  • 原文地址:https://www.cnblogs.com/hzhjxx/p/9724092.html
Copyright © 2020-2023  润新知