javaScript 表格的动态添加与修改

JavaScript 表格的动态添加与修改

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<style type="text/css">
			
			
			
			table {
				text-align: center;
				margin: 300px auto;
			}
			
			input{
				width: 30px;
				display: none;
			}
		</style>
	</head>
	<body>




		<script type="text/javascript">
			// 1.创建表格
			var table = document.createElement('table')
			table.border = 1;
			table.rules = 'all';
			table.width = 300;

			// 2.创建标题行
			var title_Row = table.insertRow();
			for (var i of '编号,名称,单价,数量,总价,操作'.split(',')) {
				title_Row.insertCell().innerText = i
			}


			// 3. 创建内容行
			var default_Row = table.insertRow();

			default_Row.insertCell().innerText =1;
			default_Row.insertCell().innerHTML ='<span>苹果</span><input type="text" value="苹果" ></input>';
			default_Row.insertCell().innerHTML ='<span>1</span><input type="text" value="1" ></input>';
			default_Row.insertCell().innerHTML ='<span>1</span><input type="text" value="1" ></input>';
			default_Row.insertCell().innerHTML =1;
			
			//创建默认 按钮
			var deleteBtn = document.createElement("button");
			deleteBtn.innerText = '删除';
			deleteBtn.onclick=function(){
				this.parentElement.parentElement.remove()
				
				//从新排序号
				re_order()
			}
			
			var editBtn = document.createElement("button");
			editBtn.innerText = '修改';
			//修改事件
			editBtn.onclick=function(e){
	
						if(e.target.innerText=='修改'){
							e.target.innerText='确认修改';
							
							// 显示 输入框
							// 隐藏 文本
							let temp = e.target.parentElement.parentElement;
							
							for(let i=1;i<4;i++){
								temp.cells[i].querySelector('span').style.display='none'
								temp.cells[i].querySelector('input').style.display='block'
							
							}

						}
						else{
							e.target.innerText='修改';
							
							let temp = e.target.parentElement.parentElement;
							//更改数据
							// 隐藏 输入框
							// 显示 文本
							for(let i=1;i<4;i++){
								temp.cells[i].querySelector('span').innerText =temp.cells[i].querySelector('input').value;
								
								temp.cells[i].querySelector('span').style.display='block'
								temp.cells[i].querySelector('input').style.display='none'
							
							}
							
							// 算总价
							temp.cells[4].innerText = temp.cells[2].querySelector('span').innerText *temp.cells[3].querySelector('span').innerText
		
						}
	
				}

			

			default_Row.insertCell().appendChild(deleteBtn)
			default_Row.cells[5].appendChild(editBtn);




			// 4. 创建增加订单行
			var add_row = table.insertRow();

			var add_cell = add_row.insertCell();
			add_cell.colSpan = 6;

			// 增加订单按钮
			var add_Btn = document.createElement("button");
			add_Btn.innerText = '增加订单';
			add_cell.appendChild(add_Btn)



			// 增加订单 事件：
			add_Btn.onclick = function() {
				var x = table.firstElementChild.insertBefore(default_Row.cloneNode(true), this.parentElement.parentElement)

				if(isNaN(x.previousElementSibling.cells[0].innerText)){
					x.cells[0].innerText = 1;
				}
				else{
					x.cells[0].innerText = 1 + parseInt(x.previousElementSibling.cells[0].innerText)
					
				}

				// // 删除按钮 事件
				x.lastElementChild.firstElementChild.onclick=function(){
					this.parentElement.parentElement.remove()

					// 从新派序列号
						re_order()
				
				}
				
				// 修改按钮添加事件
				x.lastElementChild.lastElementChild.onclick=function(e){
	
						if(e.target.innerText=='修改'){
							e.target.innerText='确认修改';
							
							// 显示 输入框
							// 隐藏 文本
							let temp = e.target.parentElement.parentElement;
							
							for(let i=1;i<4;i++){
								temp.cells[i].querySelector('span').style.display='none'
								temp.cells[i].querySelector('input').style.display='block'
							
							}

						}
						else{
							e.target.innerText='修改';
							
							let temp = e.target.parentElement.parentElement;
							//更改数据
							// 隐藏 输入框
							// 显示 文本
							for(let i=1;i<4;i++){
								temp.cells[i].querySelector('span').innerText =temp.cells[i].querySelector('input').value;
								
								temp.cells[i].querySelector('span').style.display='block'
								temp.cells[i].querySelector('input').style.display='none'
							
							}
							
							// 算总价
							temp.cells[4].innerText = temp.cells[2].querySelector('span').innerText *temp.cells[3].querySelector('span').innerText
		
						}
	
				}

			}

			// 【从新 排序号】
			function re_order(){
				
				var  tr_arr = table.querySelectorAll("tr");
			
				var temp =[]
				for(var i=1;i<tr_arr.length-1;i++){
					temp.push(tr_arr[i])
				}
				for(var i=0;i<temp.length;i++){
					temp[i].cells[0].innerText=i+1;
				}
			}
	
			// 表格添加到页面
			document.body.appendChild(table)
		</script>

	</body>
</html>
javaScript 表格的动态添加与修改

JavaScript 表格的动态添加与修改

猜你喜欢
