Document原生态JS实现table表的增删改页面demo

table.html和table.js放在一个目录下

table.html

	
	
	
	


	

		

		

			
编号
			
账号
			
密码
			
邮箱
			
操作
		
		

			
10001
			
admin1
			
123
			
[email protected]
			

				
				
			
		
		

			
10002
			
admin2
			
123
			
[email protected]
			

				
				
			
		
		

			
10003
			
admin3
			
123
			
[email protected]
			

				
				
			
		
		

			
10004
			
admin4
			
123
			
[email protected]
			

				
				
			
		
	
	

table.js

var index = 1;
//定义删除的函数（声明式函数，函数表达式）
/**
 * btn 代表当前被点击的按钮对象
 */
function _delete(btn){
	btn.parentNode.parentNode.remove();
}




/**
 * 定义操作的更新函数
 */
function _update(btn){
	//获取当前按钮的名称
	var name = btn.value;

	//获取当前更新的行
	var tr = btn.parentNode.parentNode;
	//var tds = tr.childNodes;//包括所有的节点[文本节点->换行]
	var tds = tr.children;//获取所有元素

	if (name=="更新") {
		btn.value = "保存";
		//排除最后一列
		for (var i = 0; i < tds.length-1; i++) {
			//获取当前遍历的元素对象
			var td = tds[i];
			//获取当前单元格中的值
			var value = td.firstChild.nodeValue;
			td.firstChild.remove();
			//创建一个文本框元素
			var input = document.createElement("input");
			input.type="text";
			input.value=value;
			//把创建的文本框追加到当前的单元格中
			td.appendChild(input);
		}
	}else{
		btn.value="更新";
		//排除最后一列
		for (var i = 0; i < tds.length-1; i++) {
			//获取当前遍历的元素对象
			var td = tds[i];
			//获取当前单元格中的值
			var input = td.firstChild;
			var value = input.value;
			//一处当前单元格所在的文本框
			input.remove();
			//创建一个文本框元素
			var text = document.createTextNode(value);
			//把创建的文本框追加到当前的单元格中
			td.appendChild(text);
		}
	}
}

/**
 * 定义新增的函数
 */
function _add(){
	//先创建行
	var tr = document.createElement("tr");

	//创建1列
	var td1 = document.createElement("td");
	td1.innerHTML = (10004+index);
	//创建2列
	var td2 = document.createElement("td");
	td2.innerHTML = ("admin11"+index);
	//创建3列
	var td3 = document.createElement("td");
	td3.innerHTML = (123123);
	//创建4列
	var td4 = document.createElement("td");
	td4.innerHTML = (td2.innerHTML+"@qq.com");
	//创建第五列
	var td5 = document.createElement("td");

	//创建2个按钮
	var deleteBtn = document.createElement("input");
	var updateBtn = document.createElement("input");
	deleteBtn.type = "button";
	updateBtn.type = "button";
	//注册事件
	deleteBtn.setAttribute("onclick","_delete(this)");
	updateBtn.setAttribute("onclick","_update(this)");
	//设置按钮的名称
	deleteBtn.value = "删除";
	updateBtn.value = "修改";

	td5.appendChild(deleteBtn);
	td5.appendChild(document.createTextNode(" "));
	td5.appendChild(updateBtn);


	//把每一个列追加到行中
	tr.appendChild(td1);
	tr.appendChild(td2);
	tr.appendChild(td3);
	tr.appendChild(td4);
	tr.appendChild(td5);

	//把创建的行追加到表格中
	document.querySelector(".tb").appendChild(tr); 	
	index ++;
}


(function(){
	//获取所有的del元素
	var delButtons = document.querySelectorAll(".del");
	for (var i = 0; i < delButtons.length; i++) {
		var btn = delButtons[i];
		//给当前遍历按钮注册一个点击事件
		//this 代表当前粗发事件对象
		btn.setAttribute("onclick","_delete(this)");
	};


	//获取所有的更新按钮
	var updateBtns = document.querySelectorAll(".upd");
	for (var i = 0; i < updateBtns.length; i++) {
		var updateBtn = updateBtns[i];
		//注册更新按钮的更新操作函数
		updateBtn.setAttribute("onclick","_update(this);");
	};

	//获取新增按钮
	var addBtn = document.querySelector(".add");
	addBtn.setAttribute("onclick","_add();");
})();