jquery 折叠层

Question

   jquery循环遍历了一个table,当点击table的tr时，在该tr的下面、下个tr的上面显示一个div层,这个div层显示此行tr的详细信息.用jquery如何实现？

Answer 1

你不如全部都用div好了，table是结构化的行与行之间插不进div的啊～

Answer 2

用div，jquery循环遍历后的数据怎么能整齐的放到div中啊？

Answer 3

？？？什么叫整齐的放到啊。。这样？？<style>
.row { clear:both; }
.col_01 { float:left; width:10px; }
.col_02 { float:left; width:30px; }
.col_03 { float:left; width:20px; }
</style><div class="row">
<div class="col_01"></div>
<div class="col_02"></div>
<div class="col_03"></div>
</div>
<div class="row">
<div class="col_01"></div>
<div class="col_02"></div>
<div class="col_03"></div>
</div>

Answer 4

那点击div之后在对应的div下面显示一个详细信息的div,如何做啊？

Answer 5

<style>
.row, .row-detail { clear:both; }
.row-detail { display:none; }
.col_01 { float:left; width:10px; }
.col_02 { float:left; width:30px; }
.col_03 { float:left; width:20px; }
</style><div class="row">
<div class="col_01"></div>
<div class="col_02"></div>
<div class="col_03"></div>
</div>
<div class="row-detail">
<div>ur description</div>
</div>
<div class="row">
<div class="col_01"></div>
<div class="col_02"></div>
<div class="col_03"></div>
</div>
<div class="row-detail">
<div>ur description</div>
</div><script type="text/javascript">
$(".row").click(function() {
$(".row-detail").hide();
$(this).next(".row-detail").show();
});
</script>

Answer 6

这个<div class="row-detail"> <div>ur description</div> </div> 能不每个div后面都加个隐藏的吗？当我点击比如说<div class="col_01"></div>这个div时，div下新建一个显示详细信息的div。

Answer 7

我也这么想的，结果是不行的，我实现的方法：
假设是班组和组员的table，班组是一级tr,tr的name=team_xx;组员是下级tr,tr的name=person_xx,tr的style='display:block',你点team_xx时可以显示/隐藏组员的tr

Answer 8

但是你打开详细之后就不隐藏了么？...
或者如果你不想写的话可以动态加-，-
<script type="text/javascript">
    $(".row").click(function() {
        if($(this).next(".row-detail").size() == 0) {
             var html = '<div class="row-detail"><div>ur description</div></div>';
             $(this).append(html).show();
        }        $(".row-detail").hide();
        $(this).next(".row-detail").show();
    });
</script>