动态操作表格_java动态操作表-优快云博客

本文链接：https://blog.youkuaiyun.com/java_zhaoyanli/article/details/50927270

<span style="font-size:18px;"><!DOCTYPE HTML>
<html>
<head>
<title>动态操作表格</title>
<meta charset="utf-8" />
<style>
	table{width:500px; border-collapse:collapse;
		text-align:center;
	}
	td{border:1px solid #ccc}
	thead td{font-weight:bold;}
</style>
<script>
	var data=[
{"id":1001,"name":'可口可乐',"price":2.5,"count":3000},
{"id":1003,"name":'百事可乐',"price":2.5,"count":5000},
{"id":1011,"name":'非常可乐',"price":2.3,"count":1000}
	];
	function createTable(){
		//创建table元素
		var table=document.createElement("table");
		//用table创建tHead，保存在变量thead中
		var thead=table.createTHead();
		//在thead中添加一个tr，保存在变量tr中
		var tr=thead.insertRow();
		//遍历data中第一个商品对象的每个属性
		for(var key in data[0]){
			//tr中添加一个td,保存在变量td中
			var td=tr.insertCell();
			td.innerHTML=key;//td的内容为key
		}//(遍历结束)
		var td=tr.insertCell();
		td.innerHTML="operate";

		//用table创建tBody，保存在变量tbody中
		var tbody=table.createTBody();
		//遍历data中每个商品对象
		for(var i=0;i<data.length;i++){
			//在tbody中添加一个tr，保存在变量tr中
			var tr=tbody.insertRow();
			//遍历当前商品对象的每个属性
			for(var key in data[i]){
				//在tr中添加td，保存在变量td中
				var td=tr.insertCell();
				//设置td内容为当前前商品对象的key属性的值
				td.innerHTML=data[i][key];
			}
			var td=tr.insertCell();//添加按钮格
			var btn=document.createElement("button");//创建按钮
			btn.innerHTML="X";
			btn.οnclick=function(){//删除当前行
				//获得要删除的商品名称:
				var pname=this.parentNode.parentNode
																 .cells[1].innerHTML;
				//确认是否继续删除
				var r=confirm("是否继续删除"+pname+"?");
				if(r){//如果确定继续
					//获得当前行的位置
					var i=this.parentNode.parentNode.rowIndex;
					//删除table中的第i行
					document.querySelector("#data>table")
									.deleteRow(i);
				}
			}
			td.appendChild(btn);//将按钮追加到td中
		}
		//将table元素追加到id为data的div下
		document.getElementById("data").appendChild(table);
	}
	window.οnlοad=function(){
		createTable();
	}
</script>
</head>
<body>
	<div id="data"></div>
</body>
</html>
</span>