jquery问题，有没有哪个库可以隐藏或显示一些列

table有若干列P0 P1, P2 P3 P4 P5 P6 P7 P8如何实现点P0隐藏P1，P2，P3,P4
点击P5 ,隐藏P6，P7，P8再次点击则显示出来
这可以实现吗？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

楼主试试<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">
<style type="text/css"></style>
</head>
<body>
<div class="wrapper">
<table>
<tr>
<td>第一章</td>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>第二章</td>
<td>2-1</td>
<td>2-2</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">//<![CDATA[
$(function(){
$('tr:first td:first').click(function(){
if( $(this).next().is(':visible') ){
$('tr').each(function(){
$(this).find('td:gt(0):lt(3)').hide();
})
}else{
$('tr').each(function(){
$(this).find('td:gt(0):lt(3)').show();
})
}

})
$('tr:first td:eq(4)').click(function(){
if( $(this).next().is(':visible') ){
$('tr').each(function(){
$(this).find('td:gt(4)').hide();
})
}else{
$('tr').each(function(){
$(this).find('td:gt(4)').show();
})
}

})
})
//]]></script>
</body>
</html>
这种过于个性化的需求应该找不到现成的通用代码，尽管jQuery的宣传口号是Write Less, Do More，但是总归还是需要自己写一部分的，据我所知，还没有哪一种语言能牛叉到Write Nothing, Do Everything.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
<style type="text/css">
table { border-collapse:collapse; }
td { border:1px solid #CCC; font:12px Tahoma, Geneva, sans-serif; text-align:center; width:50px; }
</style><script type="text/javascript">
$(document).ready(function() {
    $("td:eq(0)").toggle(
    function() {
        $("td").each(function() {
            if ($(this).index() % 9 >= 1 && $(this).index() % 9 <= 4) $(this).hide();
        });
    }, function() {
        $("td").each(function() {
            if ($(this).index() % 9 >= 1 && $(this).index() % 9 <= 4) $(this).show();
        });
    });
    $("td:eq(5)").toggle(function() {
        $("td").each(function() {
            if ($(this).index() % 9 >= 6 && $(this).index() % 9 <= 8) $(this).hide();
        });
    }, function() {
        $("td").each(function() {
            if ($(this).index() % 9 >= 6 && $(this).index() % 9 <= 8) $(this).show();
        });
    });
});</script>
</head><body>
<table border="0">
    <tr>
<td>P0</td>
        <td>P1</td>
        <td>P2</td>
        <td>P3</td>
        <td>P4</td>
        <td>P5</td>
        <td>P6</td>
        <td>P7</td>
        <td>P8</td>
    </tr>
    <tr>
<td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
    </tr>
</table>
</body>
</html>
$(function(){
   $('#P0').click(function(){

     if($('#p1').show()){
       $('#p1').hide();
       $('#p2').hide();
       $('#p3').hide();
       $('#p4').hide();
     }else{
       $('#p1').show();
       $('#p2').show();
       $('#p3').show();
       $('#p4').show();     }
   })
})给个思路给你
write nothing,do everything
sounds funny
not noting.
write less, do more
hide或者show可以加入动画效果吗
我是说淡入淡出我记得有toggle（1000） 1秒这样子可以做到吗
.fadeIn("1000");
.fadeOut("1000");
淡入淡出是这个。
hide('slow')、show('slow')用在表格里面貌似会有点问题，每次会出现空隙，而且这个空隙会累积增加。