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

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

2024-01-28 12:01:51 前端知识 前端哥 257 934 我要收藏

问题:
常常遇到这样的问题,当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>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/673.html
标签
jquery
评论
会员中心 联系我 留言建议 回顶部
复制成功!