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

柔情只为你懂 2021-09-18 16:14 389阅读 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>

效果图：

![20190401094301488.gif][]

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

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

个人微信公众号：

![20200824120057951.png][]

[20190401094301488.gif]: /images/20210812/d3976e28cd4a47ff911a8544c3cbc4e3.png
[20200824120057951.png]: /images/20210812/308c351a76a94fc0a380dde99ca2526f.png