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