原生JS实现不固定行和列的表格

之前有个需求,就是需要一个不固定行和列的表格,第一行的所有列的标题内容,用来表示数据对象中的key,而表格中的其他行,分别显示对应key的value。

起始显示一行一列的表格th,然后根据用户是否输入值,动态增加行和列,每次根据倒数第二行是否有值,以此来判断是否要新增行,每次根据倒是第二列是否有值,以此来判断是否要新增列,然后根据行和列的值是否清空,以此来判断是否要删除行和列。

代码部分:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		html,body{
			width: 100%;
			height: 100%;
		}
		table{
			border-collapse:collapse;
			background: #fff;
		}
		tr{
			height: 50px;
		}
		td{
			width: 300px;
			height: 100px;
			background: #f60;
			border-right: 1px solid #000;
		}
		input{
			width: 100%;
			height: 100%;
			font-size: 30px;
			background: lightblue;
			outline: none;
		}
	</style>
</head>
<body>
	<table>
		<thead>
			<tr>
				<th>
					<input type="text" placeholder="请输入标题">
				</th>
			</tr>
		</thead>

		<tbody>
			
		</tbody>
	</table>
</body>
</html>
<script type="text/javascript">
	function $(val){
		if(val.indexOf(0)=="#"){
			return document.getElementById(val);
		}else if(val.indexOf(0)=="."){
			return document.getElementsByClassName(val);
		}else{
			return document.getElementsByTagName(val);
		}
	}

	// 表头tr
	var TitleTr = $("thead")[0].lastElementChild;
	// 表内容
	var Tbody = $("tbody")[0];
	// 删除行开关
	var deleteTr = true;
	// 删除列开关
	var deleteTd = false;

	// var i = false;
	setInterval(function(){
		// 所有行
		var allTr = $("tr");
		// 最后一行的下标
		var lastTrIndex = allTr.length-1;
		// 最后一行
		var lastTr = allTr[lastTrIndex];
		// 最后一行的所有元素
		var lastAllTd = lastTr.children;
		

		// 循环最后一行中所有的td/th
		for(var a=0;a<lastAllTd.length;a++){
			// 如果其中有一个元素的子元素input有值,则创建行
			if(lastAllTd[a].lastElementChild.value != ""){
				// 创建一行
				let tr = document.createElement("tr");
				// 循环,判断创建的行要包括多少列
				for(var b=0;b<lastAllTd.length;b++){
					// 创建input,创建td,追加到tr,追加到tbody
					let input = document.createElement("input");
					input.setAttribute("placeholder","请输入内容");

					let td = document.createElement("td");
					td.appendChild(input);
					
					tr.appendChild(td)

					Tbody.appendChild(tr);
				}
				
			}
		}


		// 循环每一行的最后一列
		for(var c=0;c<allTr.length;c++){
			// 如果每一行的最后一列中的input框不为空,创建列
			if(allTr[c].lastElementChild.lastElementChild.value != ""){
				// 循环所有行,以此来判断创建多少行的最后一列
				for(var d=0;d<allTr.length;d++){
					if(d == 0){
						// 创建input,创建td,追加到tr,追加到tbody
						let input = document.createElement("input");
						input.setAttribute("placeholder","请输入标题");

						let th = document.createElement("th");
						th.appendChild(input);
						
						TitleTr.appendChild(th)
					}else{
						// 创建input,创建td,追加到tr,追加到tbody
						let input = document.createElement("input");
						input.setAttribute("placeholder","请输入内容");

						let td = document.createElement("td");
						td.appendChild(input);
						
						allTr[d].appendChild(td)
					}
				}
				
			}
		}

		// 判断是否要删除空行
		if(allTr[lastTrIndex-1]){
			// 倒数第二行的所有元素
			var lastPreAllTd = allTr[lastTrIndex-1].children;
			// 判断最后一行的前一行的元素是否为空
			for(var e=0;e<lastPreAllTd.length;e++){
				if(lastPreAllTd[e].lastElementChild.value != ""){
					deleteTr = false;
					break;
				}else{
					deleteTr = true;
				}
			}
			// 如果倒数第二行为空,删除最后一行
			if(deleteTr){
				allTr[lastTrIndex].remove()
			}
		}
		

		// 判断是否要删除空列
		// 循环所有行
		for(var f=0;f<allTr.length;f++){
			// 循环每一行的倒数第二列
			if(allTr[f].children[allTr[f].children.length-2]){
				if(allTr[f].children[allTr[f].children.length-2].lastElementChild.value != ""){
					deleteTd = false;
					break;
				}else{
					deleteTd = true;
				}
			}
		}
		// 如果判断是true,即可以删除空列
		if(deleteTd){
			// 循环所有行
			for(var g=0;g<allTr.length;g++){
				// 删除每一行的最后一列
				if(allTr[g].children[allTr[g].children.length-2]){
                    // 删除每一行的最后一列
                    allTr[g].children[allTr[g].children.length-1].remove();
                }
			}
		}

	}, 16)

</script>

效果图:

好了,以上就是动态实现行和列的方法和效果。

如有问题,请指出,接受批评。

个人微信公众号:

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

坏丶毛病

很庆幸此文有幸对您有帮助 ~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值