Question

我搜索了用于展开和折叠行的参考。但是在我的脚本上它不起作用，这是我的脚本：

    <thead>   
    <tr>
        <th width="5" class="cb"><input type="checkbox" id="cbcall" /></th>

        <th> Domain</th>
        <th> Total Member</th>
        <th> Monthly Growth</th>
        <th> Growth % </th>
    </tr>
</thead>
<tbody>
    <?php foreach ( $this->paging as $kk=>$dom ): ?>
    <tr>
        <tr class="header" style="cursor:pointer;">
            <th><input type="checkbox" name="cb[]" value="<?php echo $dom['m'] ?>" /></th>
            <th colspan="3"><i class="fa fa-chevron-circle-right"></i>&nbsp<strong><?php echo $this->escape($dom['member_domain'])?></strong></th>
            <th></th>
        </tr>
        <?php foreach ( $this->paginator as $k=>$value ): ?>
            <tr>
            <?php if ($this->escape($value['member_domain']) == $this->escape($dom['member_domain'])){?>
                    <td></td>
                    <td><?php echo '&nbsp&nbsp&nbsp&nbsp&nbsp'.$this->escape($value['member_client']) ?> </td>
                    <td><center><?php echo $this->escape($value['1_month']) ?></center></td>
                    <td><center><?php echo $this->escape($value['1_month'])-$this->escape($value['2_month']) ?></center></td>
                    <td><center>
                        <strong><?php echo number_format((100 * ($this->escape($value['1_month'])-$this->escape($value['2_month'])))/$this->escape($value['1_month']),0)."%" ?>
                        </strong>
                        </center>
                    </td>
            <?php } ?>
            </tr>
        <?php endforeach; ?>    
    </tr>
    <?php endforeach; ?>
</tbody>

修改

这是我的剧本：

$('.header').click(function(){
    $(this).nextUntil('tr.header').slideToggle(100, function(){
    });
});

并且视图看起来像：

my view

我希望在点击“域名”时进行展开和折叠。

我使用过这种方法但没有用：

expand/collapse table rows with JQuery

使用了jQuery 1.110。有人帮忙??

Answer 1

$(document).ready(function(){
	$(".open-bext").click(function(){
    	$(this).parents("tr").next("tr").show();
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
    <tr>
        <td><a href="#" class="open-bext">Open</a>
        </td>
    </tr>
    
    <tr class="detail" style="display: none">
        <td>content will come here
        </td>
    </tr>
    <tr>
        <td><a href="#" class="open-bext">Open</a>
        </td>
    </tr>
    
    <tr class="detail" style="display: none">
        <td>content will come here
        </td>
    </tr>
    <tr>
        <td><a href="#" class="open-bext">Open</a>
        </td>
    </tr>
    
    <tr class="detail" style="display: none">
        <td>content will come here
        </td>
    </tr>
</table>

点击行上的展开和合并行

修改

1 个答案: