layui table表格隐藏显示

image.png
image.png

<table class="layui-table" style="width: 98%;margin: 0 auto">
    <colgroup>
        <col width="150">
        <col width="200">
        <col>
    </colgroup>
    <thead>
    <tr>
        <th width="500">收款</th>
        <th width="500">1月</th>
        <th width="500">2月</th>
        <th width="500">3月</th>
        <th width="500">4月</th>
        <th width="500">5月</th>
        <th width="500">6月</th>
        <th width="500">7月</th>
        <th width="500">8月</th>
        <th width="500">9月</th>
        <th width="500">10月</th>
        <th width="500">11月</th>
        <th width="500">12月</th>
    </tr>
    </thead>
    <tbody>
    {foreach $array as $key}
    <tr class="text-c">
        <td class="pr" style="cursor: pointer;" id="{$key.id}" onclick="city($('.'+'{$key.id}'))">{$key.name}</td>
        {foreach $key.data as $k}
        <td>{$k}</td>
        {/foreach}

    </tr>
    {foreach $key.city as $k}
    <tr class="text-c {$key.id} city" style="display: none;">
        <td>{$k.name}</td>
        {foreach $k.data as $ke}
        <td>{$ke}</td>
        {/foreach}
    </tr>
    {/foreach}
    {/foreach}
    </tbody>
</table>
<script>
    $(function () {



        $('#search').click(function () {
            $.ajax({
                type: "post",
                url: "{:url('Reportform/czSearch')}",
                data: {
                    'campus': $('#xq').val(),
                    'czr': $('#czr').val(),
                    'sfxf': $('#sfxf').val(),
                    'add_time': $('#date').val()
                },
                async: true,
                success: function (i) {
                    $('#sk').html(i);
                }
            });
        })
    })


    function city(id) {
        if (id.css('display')=='none'){
            id.css('display','table-row')
        }else {
            id.css('display','none')
        }

    }
</script>

display:none //隐藏
display:table-row //显示