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