全JS创建动态表格

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<title>Document</title>
	<style type="text/css">
		table{
			width: 500px;
			border: 1px solid gray;
			margin-top: 30px;
			border-collapse: collapse;
		}
		th,td{
			line-height: 35px;
			text-align: center;
			border: 1px solid gray;
		}
		a{	
			line-height: 35px;
			text-align: center;
		}
	</style>
</head>
<body>
	<script type="text/javascript">
		var count = 1;		//计数器1 后面有用
		var count2 = 0;		//计数器2 后面有用
		function plusinp(){			//增加input输入框与前面的文字
			var di = document.createElement('div');		//做个盒子装着输入框与文字  没啥用
			for (var i = 0; i < arguments.length; i++) {	//循环置入参数
				window["w"+i] = pluswrite(arguments[i]);	//循环定义变量  调用函数创建文字(write)
				window["inp"+i] = document.createElement('input');	//循环定义变量 创建input
				window["inp"+i].value = '';		//将input值放空  方便下面点击事件对input值的判断
				di.appendChild(window["inp"+i]);	//将input放进div
				di.insertBefore(window["w"+i],window["inp"+i]);	//对应顺序将文字放到对应的input前面(after不能用/实验失败...)
				count2++; 	//计数器2在点击事件会调用到  暂时没用
			}
			var but = document.createElement('button');		//增加按钮
			but.innerHTML = '增加';
			but.setAttribute("id","but");		//给按钮一个ID方便找到
			di.appendChild(but);	
			return di;
		 }
		function pluswrite(argument) {		//写文字 用span装着
			var span = document.createElement('span');
			span.innerHTML = argument;
			return span;
		 }
		function gettable() {	//做表格
			var table = document.createElement('table');
			var tr = gettag("tr");	//照抄老师的gettag函数,视频有
			for (var i = 0; i < arguments.length; i++) {
				var th = getTh(arguments[i]);	//这个地方需要特别点的参数,又不想在gettag里加if索性重写一个函数
				tr.appendChild(th);
			}
			table.appendChild(tr);
			return table;
		 }
		function gettag(tagName){		//下面三个function都是一样的,尤其是2和3,只不过懒得弄了
			var tag = document.createElement(tagName);
			return tag;
		 }
		function getTh(argument) {
			var tag = document.createElement('th');
			tag.innerHTML = argument;
			return tag;
		 }
		function getTd(argument) {
			var tag = document.createElement('td');
			tag.innerHTML = argument;
			return tag;
		 }
		function del(c){
			c.childNodes[4].onclick = function(){
				if (count==2) {
				c.parentNode.removeChild(c);
				count--;
				a.removeChild(a.childNodes[0]);
				document.body.removeChild(document.body.childNodes[4]);
				console.log(document.body.childNodes[4]);
			}
				else{
				c.parentNode.removeChild(c);
				count--;
				console.log(document.body.childNodes);
				}
			}
		 }
		var b = plusinp("编号:","姓名:","年龄:","住址:");	//最上面的文字与input
		document.body.appendChild(b);
		var a = '';		//a是table,本来想放进下面点击函数里面的,后来发现tr都要加进去,于是就全局了
		document.getElementById('but').onclick = function (){
			if(window["inp"+0].value==''||window["inp"+1].value==''||window["inp"+3].value==''){ //判定条件第124框不能为空,年龄无所谓了,然后应该加个confirm提示框,没做;而且因为之前放空了input,所以能这样检测,不设空好像不行。
				alert('输入不能为空');
				for (var i = 0; i < count2; i++) {
					window["inp"+i].value='';  //把输入错误的清除
				}
			}
			else if (count == 1){  //计数器1的作用 检测你是否第一次点击增加按钮 判断是否添加表头
				a = gettable("编号","姓名","年龄","住址",'操作');
				document.body.appendChild(a);
				var tr = gettag("tr");
				var oa = document.createElement('a');
				oa.innerHTML = '删除';
				oa.href = "#";
				tr.appendChild(oa);
				for (var i = 0; i < count2; i++) {	//计数器2的作用 通过你给的参数的数量决定input的数量
					var td = getTd(window["inp"+i].value);
					tr.insertBefore(td,oa);
					window["inp"+i].value='';
				}
				del(tr);
				a.appendChild(tr);
				count++;		//计数器1++
			}
			else{
				var tr = gettag("tr");
				var oa = document.createElement('a');
				oa.innerHTML = '删除';
				oa.href = "#";
				tr.appendChild(oa);
				for (var i = 0; i < count2; i++) {
					var td = getTd(window["inp"+i].value);
					tr.insertBefore(td,oa);
					window["inp"+i].value='';
				}
				del(tr);
				a.appendChild(tr);
				count++;
			}
		 }
	</script>
</body>
</html>

其中BUG比较多,window[“img”+i]等变量可以用数组替代,多个函数可以整合,
以下代码就是数组的操作。

<script type="text/javascript">
	var x = [],y = [],a,b;
	for (var i = 0; i < 6; i++) {
		x[i] = document.createElement('img');
		document.body.appendChild(x[i]);
	}
	a = document.createElement('img');
	a.src = "images/second1.png";
	document.body.insertBefore(a,x[2]);
	b = document.createElement('img');
	b.src = "images/second1.png";
	document.body.insertBefore(b,x[4]);
	function changetime() {
		var d = new Date();
		y[0] = parseInt(d.getHours()/10);
		y[1] = d.getHours()%10;
		y[2] = parseInt(d.getMinutes()/10);
		y[3] = d.getMinutes()%10;
		y[4] = parseInt(d.getSeconds()/10);
		y[5] = d.getSeconds()%10;
		for (var i = 0; i < 6; i++) {
		x[i].src = "images/"+y[i]+".png";
			}
	 }
	changetime();
	setInterval(changetime,1000);
	
	</script>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值