Jquery如何实现table的列折叠效果？求大神指导！！！！

qq_37434654 2017-02-01 07:58:35
Jquery如何实现table的列折叠效果？点击a标签的try使得该列的内容折叠，其他列下面的数据在本列下保持不动。这个究竟该怎样实现？求大神指导！！！！


 <html>

<body>    

<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>   

<script type="text/javascript">   

$(document).ready(function(){   

		$("a").each(function(){  

        $(this).click(function(){  

			$(".a").attr("style","display:none");		

            $("#button1").click(function(){  

				$(".a").toggle(1000); 

			}); 

        });  

		});

	

       		

    });         

	

</script>    

<table id="mytable"  border="1"  cellpadding="0"  

   cellspacing="0" bordercolor="#a3b0dc" style="border-collapse:collapse;">   

   <tr >   

      <td width="200">第一列<a href="#" id="category">try</a></td>   

      <td width="200">第二列<a href="#" id="category">try</a></td>   

      <td width="200">第三列<a href="#" id="category">try</a></td>   

      <td width="200">第四列<a href="#" id="category">try</a></td>   

      <td width="200">第五列<a href="#" id="category">try</a></td>   

   </tr>     

   <tr>

		<td class="a">id</td>

		<td>id1</td>

		<td>id2</td>

		<td>id3</td>

		<td>id4</td>

	</tr>         

   <tr>

		<td class="a">id</td>

		<td>id1</td>

		<td>id2</td>

		<td>id3</td>

		<td>id4</td>

   </tr>        

   <tr>

		<td class="a">id</td>

		<td>id1</td>

		<td>id2</td>

		<td>id3</td>

		<td>id4</td>

   </tr>   

      

   <tr>

		<td class="a">id</td>

		<td>id1</td>

		<td>id2</td>

		<td>id3</td>

		<td>id4</td>

   </tr>         

   <tr>

		<td class="a">id</td>

		<td>id1</td>

		<td>id2</td>

		<td>id3</td>

		<td>id4</td>

   </tr>   

</table>     

</body>  

</html>


这个效果不对啊，折叠后的列下面应该为空，而不是把其他列向左移动，应该每个列都可以折叠，如果折叠了中间某列的话，中间部分应该显示为空白状态！两侧的其他列下面的数据保持不动的状态。这个该怎么实现啊？求大神指导！
...全文
398 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
qq_37434654 2017-02-02
  • 打赏
  • 举报
 回复
引用 8 楼 sinat_28984567 的回复:
奥，我以为就隐藏不再显示了呢，做一下判断就应该可以了 
<html>
<body>
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
    function test(num)
    {
        if ($("#mytable tr td:nth-child(" + num + ")").css("visibility") != "hidden") {
            $("#mytable tr td:nth-child(" + num + ")").css("visibility", "hidden");
        } else {
            $("#mytable tr td:nth-child(" + num + ")").css("visibility", "visible");
        };
    }

    </script>
    <table id="mytable" border="1" cellpadding="0"
           cellspacing="0" bordercolor="#a3b0dc" style="border-collapse:collapse;">
        <tr>
            <th width="200">第一列<a href="#" onclick="test(1)">try</a></th>
            <th width="200">第二列<a href="#" onclick="test(2)">try</a></th>
            <th width="200">第三列<a href="#" onclick="test(3)">try</a></th>
            <th width="200">第四列<a href="#" onclick="test(4)">try</a></th>
            <th width="200">第五列<a href="#" onclick="test(5)">try</a></th>
        </tr>
        <tr>
            <td class="a">id</td>
            <td>id1</td>
            <td>id2</td>
            <td>id3</td>
            <td>id4</td>
        </tr>
        <tr>
            <td class="a">id</td>
            <td>id1</td>
            <td>id2</td>
            <td>id3</td>
            <td>id4</td>
        </tr>
        <tr>
            <td class="a">id</td>
            <td>id1</td>
            <td>id2</td>
            <td>id3</td>
            <td>id4</td>
        </tr>

        <tr>
            <td class="a">id</td>
            <td>id1</td>
            <td>id2</td>
            <td>id3</td>
            <td>id4</td>
        </tr>
        <tr>
            <td class="a">id</td>
            <td>id1</td>
            <td>id2</td>
            <td>id3</td>
            <td>id4</td>
        </tr>
    </table>
</body>
</html>
十分感谢，这个样式为难了我好久，前端的东西初次学习.......
二月十六 2017-02-02
  • 打赏
  • 举报
 回复
奥，我以为就隐藏不再显示了呢，做一下判断就应该可以了 
<html>
<body>
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
    function test(num)
    {
        if ($("#mytable tr td:nth-child(" + num + ")").css("visibility") != "hidden") {
            $("#mytable tr td:nth-child(" + num + ")").css("visibility", "hidden");
        } else {
            $("#mytable tr td:nth-child(" + num + ")").css("visibility", "visible");
        };
    }

    </script>
    <table id="mytable" border="1" cellpadding="0"
           cellspacing="0" bordercolor="#a3b0dc" style="border-collapse:collapse;">
        <tr>
            <th width="200">第一列<a href="#" onclick="test(1)">try</a></th>
            <th width="200">第二列<a href="#" onclick="test(2)">try</a></th>
            <th width="200">第三列<a href="#" onclick="test(3)">try</a></th>
            <th width="200">第四列<a href="#" onclick="test(4)">try</a></th>
            <th width="200">第五列<a href="#" onclick="test(5)">try</a></th>
        </tr>
        <tr>
            <td class="a">id</td>
            <td>id1</td>
            <td>id2</td>
            <td>id3</td>
            <td>id4</td>
        </tr>
        <tr>
            <td class="a">id</td>
            <td>id1</td>
            <td>id2</td>
            <td>id3</td>
            <td>id4</td>
        </tr>
        <tr>
            <td class="a">id</td>
            <td>id1</td>
            <td>id2</td>
            <td>id3</td>
            <td>id4</td>
        </tr>

        <tr>
            <td class="a">id</td>
            <td>id1</td>
            <td>id2</td>
            <td>id3</td>
            <td>id4</td>
        </tr>
        <tr>
            <td class="a">id</td>
            <td>id1</td>
            <td>id2</td>
            <td>id3</td>
            <td>id4</td>
        </tr>
    </table>
</body>
</html>
qq_37434654 2017-02-02
  • 打赏
  • 举报
 回复
引用 1 楼 sinat_28984567 的回复:
感觉怪怪的。。。 
<html>
<body>    
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>   
<script type="text/javascript">   
    function test(num)
    {
        $("#mytable tr td:nth-child(" + num + ")").css("border", "0").text("");
    }
	
</script>    
<table id="mytable"  border="1"  cellpadding="0"  
   cellspacing="0" bordercolor="#a3b0dc" style="border-collapse:collapse;">   
   <tr >   
      <th width="200">第一列<a href="#" onclick="test(1)">try</a></th>   
      <th width="200">第二列<a href="#" onclick="test(2)">try</a></th>   
      <th width="200">第三列<a href="#" onclick="test(3)">try</a></th>   
      <th width="200">第四列<a href="#" onclick="test(4)">try</a></th>   
      <th width="200">第五列<a href="#" onclick="test(5)">try</a></th>   
   </tr>     
   <tr>
		<td class="a">id</td>
		<td>id1</td>
		<td>id2</td>
		<td>id3</td>
		<td>id4</td>
	</tr>         
   <tr>
		<td class="a">id</td>
		<td>id1</td>
		<td>id2</td>
		<td>id3</td>
		<td>id4</td>
   </tr>        
   <tr>
		<td class="a">id</td>
		<td>id1</td>
		<td>id2</td>
		<td>id3</td>
		<td>id4</td>
   </tr>   
      
   <tr>
		<td class="a">id</td>
		<td>id1</td>
		<td>id2</td>
		<td>id3</td>
		<td>id4</td>
   </tr>         
   <tr>
		<td class="a">id</td>
		<td>id1</td>
		<td>id2</td>
		<td>id3</td>
		<td>id4</td>
   </tr>   
</table>     
</body>  
</html>
还有个问题就是你这种方式的话，怎么让他点击后在显示出来呢？
qq_37434654 2017-02-02
  • 打赏
  • 举报
 回复
引用 3 楼 jslang 的回复:
display:none改成 visibility:collapse;
这个精髓了，我调了好久，这个设置很棒，学到了
qq_37434654 2017-02-02
  • 打赏
  • 举报
 回复
引用 1 楼 sinat_28984567 的回复:
感觉怪怪的。。。 
<html>
<body>    
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>   
<script type="text/javascript">   
    function test(num)
    {
        $("#mytable tr td:nth-child(" + num + ")").css("border", "0").text("");
    }
	
</script>    
<table id="mytable"  border="1"  cellpadding="0"  
   cellspacing="0" bordercolor="#a3b0dc" style="border-collapse:collapse;">   
   <tr >   
      <th width="200">第一列<a href="#" onclick="test(1)">try</a></th>   
      <th width="200">第二列<a href="#" onclick="test(2)">try</a></th>   
      <th width="200">第三列<a href="#" onclick="test(3)">try</a></th>   
      <th width="200">第四列<a href="#" onclick="test(4)">try</a></th>   
      <th width="200">第五列<a href="#" onclick="test(5)">try</a></th>   
   </tr>     
   <tr>
		<td class="a">id</td>
		<td>id1</td>
		<td>id2</td>
		<td>id3</td>
		<td>id4</td>
	</tr>         
   <tr>
		<td class="a">id</td>
		<td>id1</td>
		<td>id2</td>
		<td>id3</td>
		<td>id4</td>
   </tr>        
   <tr>
		<td class="a">id</td>
		<td>id1</td>
		<td>id2</td>
		<td>id3</td>
		<td>id4</td>
   </tr>   
      
   <tr>
		<td class="a">id</td>
		<td>id1</td>
		<td>id2</td>
		<td>id3</td>
		<td>id4</td>
   </tr>         
   <tr>
		<td class="a">id</td>
		<td>id1</td>
		<td>id2</td>
		<td>id3</td>
		<td>id4</td>
   </tr>   
</table>     
</body>  
</html>
可以的，学到了
二月十六 2017-02-01
  • 打赏
  • 举报
 回复
引用 3 楼 jslang 的回复:
display:none改成 visibility:collapse;
学习了
天际的海浪 2017-02-01
  • 打赏
  • 举报
 回复
display:none改成 visibility:collapse;
二月十六 2017-02-01
  • 打赏
  • 举报
 回复
这种效果行吗？是你想要的嘛？
二月十六 2017-02-01
  • 打赏
  • 举报
 回复
感觉怪怪的。。。 
<html>
<body>    
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>   
<script type="text/javascript">   
    function test(num)
    {
        $("#mytable tr td:nth-child(" + num + ")").css("border", "0").text("");
    }
	
</script>    
<table id="mytable"  border="1"  cellpadding="0"  
   cellspacing="0" bordercolor="#a3b0dc" style="border-collapse:collapse;">   
   <tr >   
      <th width="200">第一列<a href="#" onclick="test(1)">try</a></th>   
      <th width="200">第二列<a href="#" onclick="test(2)">try</a></th>   
      <th width="200">第三列<a href="#" onclick="test(3)">try</a></th>   
      <th width="200">第四列<a href="#" onclick="test(4)">try</a></th>   
      <th width="200">第五列<a href="#" onclick="test(5)">try</a></th>   
   </tr>     
   <tr>
		<td class="a">id</td>
		<td>id1</td>
		<td>id2</td>
		<td>id3</td>
		<td>id4</td>
	</tr>         
   <tr>
		<td class="a">id</td>
		<td>id1</td>
		<td>id2</td>
		<td>id3</td>
		<td>id4</td>
   </tr>        
   <tr>
		<td class="a">id</td>
		<td>id1</td>
		<td>id2</td>
		<td>id3</td>
		<td>id4</td>
   </tr>   
      
   <tr>
		<td class="a">id</td>
		<td>id1</td>
		<td>id2</td>
		<td>id3</td>
		<td>id4</td>
   </tr>         
   <tr>
		<td class="a">id</td>
		<td>id1</td>
		<td>id2</td>
		<td>id3</td>
		<td>id4</td>
   </tr>   
</table>     
</body>  
</html>
Bootstrap3--日常练手--实现面板折叠里面嵌入表格
大家好~ 珊妹这不是转了前端吗，前端插件真是数不胜数呢，所以珊妹打算以后会在闲暇时间来利用常用的插件来写一些大家平时可能会用到的例子来供大家参考，代码一定不是最优的，但尽可能是可用的，所以有幸遇到大神，还望多多提点一二~ 下面我们来说今天的功能，利用bootstrap插件完成面板折叠嵌入表格： 首先下载bootstrap，这都不用说了，珊妹这里下载的是bootstrap3版本，下载链接：https://v3.bootcss.com/ 大家还要下载个jquery.min.js文件，可以去官网下载； 然
bootstrap Table 传参写法
//$('#mytab').bootstrapTable('destroy');//这是销毁表格的代码 //根据窗口调整表格高度 /* $(window).resize(function() { $('#mytab').bootstrapTable('resetView', { height: tableHeight()})});*/ try { $.ajaxSetup({heade...
jquery-easyui实现页面布局和增删改查操作（SSH2框架支持）
前几天心血来潮用jquery-easyui+spring、struts2、hibernate实现了一个系统的一小部分功能，下面给大家分享一下。   首先看运行效果： 【图一：登录页】       【图二：页面布局】     【图三：用户编辑层】       【图四：确认弹出框】    
bootstrap tree ajax,bootstrap-treetable: 这个东西最初出现在guns项目，基于jquery.treegrid.js实现的树。但在实际应用过程中这个方案数据量过大...
bootstrap-treetable暂停维护，谢谢大家支持！项目介绍这个东西最初出现在guns项目，基于jquery.treegrid.js实现的树。但在实际应用过程中这个方案数据量过大会有性能问题，遂抛掉了jquery.treegrid重新实现了相关功能。用法跟bootstrap-table差不多。PS:如果不需要固定列，建议使用1.0.6版本2019-2-12 更新内容修复Bootstrap...
layui 树形表格 treeTable使用详细指南，不能折叠解决办法
最近在写一个商品分类管理的功能，本来想用layui的树形组件来写，但发现layui原生的tree只能展示title，而分类的其他字段无法展示，这就有点不适用了，无意中看到一位大神自定义写的一个树形表格组件，正好满足我的要求，特此将使用方法以及其中遇到的一些坑记录下来。。。 首先看下treeTable的 演示地址 项目地址 好了，如果看完演示到这里你觉得正好符合你的功能要求，就可以继续往下看了， 虽...
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章