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

最新推荐文章于 2023-08-21 15:45:11 发布

坏丶毛病

最新推荐文章于 2023-08-21 15:45:11 发布

阅读量2k

点赞数 2

分类专栏： JavaScript-成长之路 HTML-成长之路 CSS-成长之路文章标签：表格动态行和列 js实现表格动态坏丶毛病动态表格

一只努力学习进步的web前端小菜鸟。转载请声明来源。

本文链接：https://blog.csdn.net/qq_43363884/article/details/88941580

版权

JavaScript-成长之路同时被 3 个专栏收录

20 篇文章 4 订阅

订阅专栏

CSS-成长之路

12 篇文章 1 订阅

订阅专栏

HTML-成长之路

8 篇文章 0 订阅

订阅专栏

之前有个需求，就是需要一个不固定行和列的表格，第一行的所有列的标题内容，用来表示数据对象中的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
评论
原生JS实现不固定行和列的表格

之前有个需求，就是需要一个不固定行和列的表格，第一行的所有列的标题内容，用来表示数据对象中的key，而表格中的其他行，分别显示对应key的value。起始显示一行一列的表格th，然后根据用户是否输入值，动态增加行和列，每次根据倒数第二行是否有值，以此来判断是否要新增行，每次根据倒是第二列是否有值，以此来判断是否要新增列，然后根据行和列的值是否清空，以此来判断是否要删除行和列。代码部分：...
复制链接

扫一扫