使用核心DOM创建交互表格-优快云博客

本文链接：https://blog.youkuaiyun.com/sunsucheng/article/details/52315940
炮炮兵跟大家分享下如何使用核心DOM
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Html Dom</title>
<style type="text/css">
	table,tr,td{text-align:center;border:1px solid #000000;border-collapse:collapse;line-height:30px;}
	table{margin:0px auto;}
	td{width:200px;}
	body{text-align:center;margin:0px auto;}
	#frist{margin-top:20px;}
</style>
</head>

<body>
	<div id="frist"></div>
	<p>该内容为作者原创，转载请声明，违规必究！</p>
</body>
<script type="text/javascript" defer>
	//初始化一个表格
	function init(){
		var fristDiv = document.getElementById("frist");
		var table = document.createElement("table");
		var tr1 = document.createElement("tr");
		tr1.style.backgroundColor="pink";
		var td11 = document.createElement("td");
		td11.innerHTML="商品名称";
		var td12 = document.createElement("td");
		td12.innerHTML="数量";
		var td13 = document.createElement("td");
		td13.innerHTML="价格";
		var td14 = document.createElement("td");
		td14.innerHTML="操作";
		tr1.appendChild(td11);
		tr1.appendChild(td12);
		tr1.appendChild(td13);
		tr1.appendChild(td14);
		
		var tr2 = document.createElement("tr");
		var td21 = document.createElement("td");
		td21.innerHTML="JavaScript从入门到精通";
		var td22 = document.createElement("td");
		td22.innerHTML="5";
		var td23 = document.createElement("td");
		td23.innerHTML="50";
		var td24 = document.createElement("td");
		var input21 = document.createElement("input");
		input21.type="button";
		input21.value="修改";
		input21.οnclick=function(){
			updateRow(this);
		}
		var input22 = document.createElement("input");
		input22.type="button";
		input22.value="删除";
		input22.οnclick=function(){
			deleteRow(this);
		}
		td24.appendChild(input21);
		td24.appendChild(input22);
		tr2.appendChild(td21);
		tr2.appendChild(td22);
		tr2.appendChild(td23);
		tr2.appendChild(td24);
		
		
		var tr3 = document.createElement("tr");
		var td31 = document.createElement("td");
		td31.innerHTML="Thinking in Java";
		var td32 = document.createElement("td");
		td32.innerHTML="200";
		var td33 = document.createElement("td");
		td33.innerHTML="78";
		var td34 = document.createElement("td");
		var input31 = document.createElement("input");
		input31.type="button";
		input31.value="修改";
		input31.οnclick=function(){
			updateRow(this);
		}
		var input32 = document.createElement("input");
		input32.type="button";
		input32.value="删除";
		input32.οnclick=function(){
			deleteRow(this);
		}
		td34.appendChild(input31);
		td34.appendChild(input32);
		tr3.appendChild(td31);
		tr3.appendChild(td32);
		tr3.appendChild(td33);
		tr3.appendChild(td34);
		
		
		
		var tr4 = document.createElement("tr");
		var td41 = document.createElement("td");
		td41.innerHTML="精通HTML5";
		var td42 = document.createElement("td");
		td42.innerHTML="144";
		var td43 = document.createElement("td");
		td43.innerHTML="95";
		var td44 = document.createElement("td");
		var input41 = document.createElement("input");
		input41.type="button";
		input41.value="修改";
		input41.οnclick=function(){
			updateRow(this);
		}
		var input42 = document.createElement("input");
		input42.type="button";
		input42.value="删除";
		input42.οnclick=function(){
			deleteRow(this);
		}
		td44.appendChild(input41);
		td44.appendChild(input42);
		tr4.appendChild(td41);
		tr4.appendChild(td42);
		tr4.appendChild(td43);
		tr4.appendChild(td44);
	
	    table.appendChild(tr1);
		table.appendChild(tr2);
		table.appendChild(tr3);
		table.appendChild(tr4);
		
		
		
		var tr5 = document.createElement("tr");
		var td54 = document.createElement("td");
		td54.colSpan="4";
		var input51 = document.createElement("input");
		input51.type="button";
		input51.value="追加一行";
		input51.οnclick=function(){
			addRow(this);
		}
		var input52 = document.createElement("input");
		input52.type="button";
		input52.value="复制最后一行";
		input52.οnclick=function(){
			cloneRow(this);
		}
		td54.appendChild(input51);
		td54.appendChild(input52);
		tr5.appendChild(td54);
	
	    table.appendChild(tr1);
		table.appendChild(tr2);
		table.appendChild(tr3);
		table.appendChild(tr4);
		table.appendChild(tr5);
		   
		fristDiv.appendChild(table);
		
	}
	
	
	function updateRow(obj){
		//找到需要修改的数量和价格列
		var tr = obj.parentNode.parentNode;
		var name = tr.children[0].innerHTML;
 		var num = tr.children[1].innerHTML;
		var price = tr.children[2].innerHTML;
		
		var txt1 = document.createElement("input");
		txt1.type="text";
		txt1.value=name;
		
		var txt2 = document.createElement("input");
		txt2.type="text";
		txt2.value=num;
		
		var txt3 = document.createElement("input");
		txt3.type="text";
		txt3.value=price;
		
		tr.children[0].innerHTML="";
		tr.children[0].appendChild(txt1);
		
		tr.children[1].innerHTML="";
		tr.children[1].appendChild(txt2);
		
		tr.children[2].innerHTML="";
		tr.children[2].appendChild(txt3);
		
		obj.value="保存";
		obj.οnclick=function(){
			sureRow(this);
		}
	}
	
	function sureRow(obj){
		var tr = obj.parentNode.parentNode;
		var name = tr.children[0].children[0].value;;
 		var num = tr.children[1].children[0].value;
		var price = tr.children[2].children[0].value;
		tr.children[0].innerHTML=name;
		tr.children[1].innerHTML=num;
		tr.children[2].innerHTML=price;
		obj.value="修改";
		obj.οnclick=function(){
			updateRow(this);
		}
	}
	
	function deleteRow(obj){
		var tr = obj.parentNode.parentNode;
		var table  = obj.parentNode.parentNode.parentNode;
		table.removeChild(tr);
	}
	
	function cloneRow(obj){
		var fristDiv = document.getElementById("frist");
		if(fristDiv.children[0].children.length<=2){
			alert("无可复制的行！！！");
			return;
		}
		var lastTr = fristDiv.children[0].children[fristDiv.children[0].children.length-2];
		var newTr = lastTr.cloneNode(true);
		
		//判断是否是修改状态
		var lastTd = newTr.children[newTr.children.length-2];
		if(lastTd.children.length>0){
			//设置该行中按钮的事件
			newTr.children[newTr.children.length-1].children[0].οnclick=function(){
			sureRow(this);
			}
		}else{
			//设置该行中按钮的事件
			newTr.children[newTr.children.length-1].children[0].οnclick=function(){
			updateRow(this);
			}
		}
		
		
		newTr.children[newTr.children.length-1].children[1].οnclick=function(){
			deleteRow(this);
		}
		
		//先删除掉最后一行
		var btnTr = fristDiv.children[0].children[fristDiv.children[0].children.length-1];
		fristDiv.children[0].removeChild(btnTr);
		
		fristDiv.children[0].appendChild(newTr);
		fristDiv.children[0].appendChild(btnTr);
		
	}
	
	
	function addRow(obj){
		var fristDiv = document.getElementById("frist");
		var lastTr = fristDiv.children[0].children[fristDiv.children[0].children.length-2];
		
		var tr = document.createElement("tr");
		var td1 = document.createElement("td");
		var input1 = document.createElement("input");
		input1.type="text";
		input1.value="";
		td1.appendChild(input1);
		
		var td2 = document.createElement("td");
		var input2 = document.createElement("input");
		input2.type="text";
		input2.value="";
		td2.appendChild(input2);
		
		var td3 = document.createElement("td");
		var input3 = document.createElement("input");
		input3.type="text";
		input3.value="";
		td3.appendChild(input3);
		
		var td4 = document.createElement("td");
		var input41 = document.createElement("input");
		input41.type="button";
		input41.value="保存";
		input41.οnclick=function(){
			sureRow(this);
		}
		var input42 = document.createElement("input");
		input42.type="button";
		input42.value="删除";
		input42.οnclick=function(){
			deleteRow(this);
		}
		td4.appendChild(input41);
		td4.appendChild(input42);
		
		tr.appendChild(td1);
		tr.appendChild(td2);
		tr.appendChild(td3);
		tr.appendChild(td4);
		
		
		
		//先删除掉最后一行
		var btnTr = fristDiv.children[0].children[fristDiv.children[0].children.length-1];
		fristDiv.children[0].removeChild(btnTr);
		
		fristDiv.children[0].appendChild(tr);
		fristDiv.children[0].appendChild(btnTr);
		
	}
	
	window.οnlοad=init;
</script>
</html>