jq实现隐藏和显示table的列——前端笔记

最新推荐文章于 2023-06-30 14:59:42 发布

我这头发越来越多呀

最新推荐文章于 2023-06-30 14:59:42 发布

阅读量1.5k

点赞数

分类专栏：前端笔记文章标签： javascript jquery html

本文链接：https://blog.csdn.net/weixin_42128648/article/details/129423131

版权

前端笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

问题：
常常遇到这样的问题，当A条件的时候要显示1 2 3 4列，当B条件的时候要显示234列，又切换到A条件又要把1列显示出来。
解决思路：
我们可以使用jq中的attr方法来改变列的显示属性display，隐藏的时候设置为none，显示的时候去掉这个属性
示例：
在这里插入图片描述
隐藏效果

显示效果

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			function hide(){//点击隐藏按钮时设置属性为none，隐藏起来
				$("[class='cl1']").attr("style","display: none;");//class选择器选择该列所有
			}
			function show(){//点击隐藏按钮时设置属性为空，显示出来
				$("[class='cl1']").attr("style","");//class选择器选择该列所有
			}
	    </script>
	</head>
	<body>
		<table border="1">
			<tr>
				<th class="cl1">第1列</th>
				<th class="cl2">第2列</th>
				<th class="cl3">第3列</th>
				<th class="cl4">第4列</th>
			</tr>
				
			<tr>
				<td class="cl1">赵1</td>
				<td class="cl2">钱2</td>
				<td class="cl3">孙3</td>
				<td class="cl4">李4</td>
			</tr>
			<tr>
				<td class="cl1">1赵</td>
				<td class="cl2">2钱</td>
				<td class="cl3">3孙</td>
				<td class="cl4">4李</td>
			</tr>
		</table>
	</body>
	<button onclick="hide()">点击隐藏列</button>
	<button onclick="show()">点击显示列</button>
</html>