Laravel中基于状态值控制表格行显示隐藏的问题求助

我来帮你搞定这个问题！你的代码主要有两个核心问题：重复的DOM ID（导致JS只能拿到第一行的状态）和错误的DOM结构/选择逻辑，咱们一步步修正：

第一步：修复Blade模板的结构与标识 #

首先调整表格结构，给需要控制的行加上专属标识，同时修正重复ID的问题：

<button class="showhide" data-prod-cat="1">Show Cancelled</button>
<table class="table table-hover">
    <thead>
        <tr>
            <th>Status</th>
            <th>Name</th>
            <th>Contact</th>
            <th>Contact Email</th>
            <th>Actions</th>
        </tr>
    </thead>
    <!-- 把tbody放在foreach外面，避免每个tr都生成一个tbody -->
    <tbody>
        @foreach ($projects as $project)
            <!-- 根据状态设置默认显示：状态4默认隐藏，其他默认显示 -->
            <tr class="row1 {{ $project->status == '4' ? 'cancelled-row' : '' }}" 
                style="{{ $project->status == '4' ? 'display:none' : 'display:table-row' }}">
                <td>
                    <form action="/projects/plan" method="post" id="statusForm{{$project->id}}">
                        @csrf
                        <!-- 去掉重复的id，用name属性存储状态即可 -->
                        <input name="status" type="hidden" value="{{$project->status}}" >
                        <input name="id" type="hidden" value="{{$project->id}}" >
                        
                        @if ($project->status == "1")
                            <input type="radio" name="status" value="1" onchange="document.getElementById('statusForm{{$project->id}}').submit()" 
                                   data-placement="top" title="project is requested" data-toggle="hoverText" >
                        @elseif ($project->status == "2")
                            <input type="radio" name="status" value="2" data-toggle="hoverText" 
                                   data-placement="top" title="project is accepted" checked >
                        @elseif ($project->status == "4")
                            <span class="fas fa-ban red" data-toggle="hoverText" 
                                  data-placement="top" title="project is cancelled"></span>
                        @endif
                    </form>
                </td>
                <td>{{$project->name}}</td>
                <td>{{$project->contact_name}}</td>
                <td>{{$project->contact_email}}</td>
                <td><a href="/projects/{{$project->id}}/edit" class="btn btn-secondary btn-sm" role="button">project Details</a></td>
            </tr>
        @endforeach
    </tbody>
</table>

这里做了几个关键调整：

• 把<tbody>移到@foreach外面，符合HTML规范（一个表格应该只有一个tbody，除非有分组需求）。
• 给状态为4的行添加了cancelled-row类，同时通过style属性默认隐藏这些行，状态1-2的行默认显示。
• 移除了重复的id="isCancelled"，因为ID在DOM中必须唯一，重复会导致JS获取元素出错。

第二步：修改JavaScript逻辑，实现逐行控制 #

现在我们可以直接通过cancelled-row类来批量操作这些行，不需要再逐行读取状态：

<script>
$(document).ready(function(){
    // 注意选择器是.showhide（类选择器，前面要加点）
    $(".showhide").click(function(e){
        e.preventDefault();
        // 切换所有cancelled-row类的行的显示状态
        $(".cancelled-row").toggle();
        
        // 可选：切换按钮文字，提升用户体验
        $(this).text(function(i, text){
            return text === "Show Cancelled" ? "Hide Cancelled" : "Show Cancelled";
        });
    });
});
</script>

为什么原来的代码会出错？ #

1. 重复ID问题：document.getElementById("isCancelled")只会返回DOM中第一个匹配该ID的元素，所以你只能拿到第一行的状态值，导致后续逻辑全部基于第一行的状态判断。
2. 选择器错误：原来的$("showhide")没有加.，这是在选择标签名为<showhide>的元素，而不是类名为showhide的按钮，点击事件根本没正确绑定。
3. 逻辑错误：原来的$('.row'+$(this).attr('data-prod-cat')).toggle()会切换所有row1类的行，不管状态是什么，不符合需求。

这样修改后，状态1-2的行会始终显示，状态4的行默认隐藏，点击按钮可以切换它们的显示/隐藏状态，完全符合你的需求！

内容的提问来源于stack exchange，提问作者ageans