tabel点击复选框显示以及隐藏相对应的列

复选框控制表格列显示

最新推荐文章于 2024-01-05 11:07:47 发布

韦裤布被

最新推荐文章于 2024-01-05 11:07:47 发布

阅读量582

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： table

本文链接：https://blog.youkuaiyun.com/qq_42826164/article/details/89528803

前端专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现通过复选框控制表格列显示的方法。默认情况下显示前六列，当勾选不同的复选框时，表格会相应地显示或隐藏对应的列。

需求:选择复选框,table显示相对应的列!

在这里插入图片描述
话不多说,直接上码,样式自行调整.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单点击显示隐藏</title>
	</head>
	<style type="text/css">
		*{margin:0px;padding:0px;list-style: none;text-decoration: none;}
		div{
			width: 800px;
			background: #e1dddd1f;
			margin: 0px auto;
			overflow: auto;
		}
		table{
			margin: 50px auto;
			border-color: #dfdfdf;
    		border-collapse: collapse;
		}
		table tr th{
		    text-align: center;
		    padding:0.5rem 0;
		    border-color: #dfdfdf;
		    border:1px solid #dfdfdf;
		
		}
		table tr td{
		    text-align: center;
		    padding:0.5rem 0;
		    border-color: #dfdfdf;
		    border:1px solid #dfdfdf;
		
		}
		tr{
			text-align: center;
			line-height: 30px;
		}
		
		
	</style>
	<body>
		<div>
			<table id="datatable" border="1" cellspacing="0" cellpadding="0">
				<tr>
					<th>Header1</th>
					<th>Header2</th>
					<th>Header3</th>
					<th>Header4</th>
					<th>Header5</th>
					<th>Header6</th>
					<th>Header7</th>
					<th>Header8</th>
					<th>Header9</th>
					<th>Header10</th>
					<th>Header11</th>
				</tr>
				<tr>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
					<td>Dat</td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
				</tr>
				<tr>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
				</tr>
				<tr>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
				</tr>
				<tr>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
				</tr>
				<tr>
					<td>Data01</td>
					<td>Data02</td>
					<td>Data3</td>
					<td>Data4</td>
					<td>Data5</td>
					<td>Data6</td>
					<td>Data7</td>
					<td>Data8</td>
					<td>Data9</td>
					<td>Data10</td>
					<td>Data11</td>
				</tr>
			</table>
			<font color="red">说明:(默认显示:1-6列,根据选择复选框显示相对应的列!样式自行调整!)</font>
			<div style="width: 200px;height: 230px;">
				<p><input type="checkbox" name="category" value="01" checked="checked" />01 </p>   
			    <p><input type="checkbox" name="category" value="02" checked="checked" />02</p>
			    <p><input type="checkbox" name="category" value="03" checked="checked" />03</p>    
			    <p><input type="checkbox" name="category" value="04" checked="checked" />04</p>    
			    <p><input type="checkbox" name="category" value="05" checked="checked" />05</p>    
			    <p><input type="checkbox" name="category" value="06" checked="checked" />06</p>    
			    <p><input type="checkbox" name="category" value="07" />07</p>
			    <p><input type="checkbox" name="category" value="08" />08</p>    
			    <p><input type="checkbox" name="category" value="09" />09</p>    
			    <p><input type="checkbox" name="category" value="10" />10</p>    
			    <p><input type="checkbox" name="category" value="11" />11</p>
			    
			</div>
			   
		</div>
	</body>
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script type="text/javascript">
		
	$(function(){
		
		function showcategory(){
		var category = document.getElementsByName("category");
		var tab = document.getElementById("datatable");
			var leng = category.length;
			for(var j = 0;j<leng;j++){
				var valss = category[j].value;
				console.log(category[j].checked);
				
				if(category[j].checked){
				    var trs = tab.rows;
				    for(var i = 0, len = trs.length; i < len; i++){
				        var cell = trs[i].cells[j];
						cell.style.display = 'table-cell';
						$("table").css("border","#dfdfdf");
				      }
				  }else{
				    var trs = tab.rows;
				    for(var i = 0, len = trs.length; i < len; i++){
				        var cell = trs[i].cells[j];
				        cell.style.display = 'none';
				      }
				  
				}
				
			}
		  }
			showcategory();
			$("input[name='category']") .click(function(){
				showcategory();
			})
		})

	</script>>
</html>

写起来不难,但还要写后端,所以来写前端还是比较耽误时间。
自己直接写一个留着拿来即用!