javascript 控制 table tr display block 显示模式时，只对第一个单元格有效

最新推荐文章于 2023-07-24 10:06:10 发布

grapemlin

最新推荐文章于 2023-07-24 10:06:10 发布

阅读量690

点赞数

分类专栏： jquery 文章标签： angularjs jquery table

本文链接：https://blog.csdn.net/jmlxx/article/details/78973670

版权

jquery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用jQuery来实现表格中特定行的显示与隐藏的方法。通过点击事件切换不同的页面标签，实现对表格数据的筛选，并展示了如何通过修改行的display属性来控制其显示状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写图片描述

            //隐藏所有数据
            $.each($("tbody#data_tr  tr"), function(){
                this.style.display = 'none';
            });
            //展示数据
            var trs = $("tbody#data_tr  tr[class='"+a+aa+"']");
            for(i = 0; i < trs.length; i++){
                trs[i].style.display = "block";
            }

改变后

            //隐藏所有数据
            $.each($("tbody#data_tr  tr"), function(){
                this.style.display = 'none';
            });
            //展示数据
            var trs = $("tbody#data_tr  tr[class='"+a+aa+"']");
            for(i = 0; i < trs.length; i++){
                trs[i].style.display = "";
            }

这里写图片描述

以上可见，block对于显示table的tr并无作用；‘’空可以实现展示效果，即去除none即可

完整代码

<tbody id="data_tr">
    <!--历程标签-->
    {if $type == 'stage'}
    {loop $aInfo $key $val}
    {loop $val $k $v}
    {if isset($stage_categorys[$k])}
    <tr {if $key>0 }style='display:none;'{/if} class="{$type}{$key}">
        <td class="text-center" style="width:150px;">{$stage_categorys[$k]}</td>
        <td class="text-center" style="width:150px;"></td>
        <td class="text-center" style="width:50px;">{$v['int_page_read_user']}</td>
        <td class="text-center" style="width:50px;">{$v['int_page_read_count']}</td>
        <td class="text-center" style="width:50px;">{$v['ori_page_read_user']}</td>
        <td class="text-center" style="width:50px;">{$v['ori_page_read_count']}</td>
        <td class="text-center" style="width:50px;">{$v['share_user']}</td>
        <td class="text-center" style="width:50px;">{$v['share_count']}</td>
        <td class="text-center" style="width:50px;">{$v['add_to_fav_user']}</td>
        <td class="text-center" style="width:50px;">{$v['add_to_fav_count']}</td>
    </tr>
    {/if}
    {/loop}
    {/loop}
    {/if}
    <!-- page start-->
    <div class="text-right we7-margin-right">
        <div>
            <label class="font-lg">页码：</label>
            <ul class="pagination pagination-centered">
                <?php for( $i=1; $i<=count($aInfo);$i++){?>
                <li {if $i==1}class="active"{/if}><a href="javascript:;">{$i}</a></li>
                <?php }?>
            </ul>
        </div>
    </div>
<script>
    $('ul li').click(function(){
        var aa=$(this).index();
        //查找active在第几个
        if(!$(this).hasClass('active')){
            //其他去除class
            $("ul").find("li[class='active']").removeClass("active");
            //添加class
            $(this).addClass('active');

            var a = $('#type_tag').val();
            //隐藏所有数据
            $.each($("tbody#data_tr  tr"), function(){
                this.style.display = 'none';
            });
            //展示数据
            var trs = $("tbody#data_tr  tr[class='"+a+aa+"']");
            for(i = 0; i < trs.length; i++){
                trs[i].style.display = "";
            }
        }
    });
</script>