向每行添加唯一的ID以根据列值隐藏/显示表行-Laravel-javascript

Question

我的刀片服务器模板包含一个表。 在此表中，状态为4的行应被隐藏（状态4 =取消）。 使用单击事件，将显示状态为4的行。 始终显示状态为1到2的行。 目前，这还没有发生。 如果第一行没有状态4，则显示所有行。 如果第一行的状态为4，则所有行均被隐藏。

我的想法是在给定的行中搜索状态（请参见javascript中的“ s”）。 如果状态== 4，则隐藏行，除非单击该按钮。 我的功能是只寻找第一行的状态。 我如何制作该函数，以便它检查每行的状态，取决于此状态，行将被隐藏还是显示？ 谢谢您的帮助。

查看脚本：

使用Javascript

<script>

$(document).ready(function(){
    $(".showhide").click(function(e){
        e.preventDefault();
        var x = document.getElementById("hide-row");
        var s = document.getElementById("isCancelled").value;
        if ( s == "4"){
            $('.row'+$(this).attr('data-prod-cat')).toggle();
        }
    });
});

</script>

刀片模板

<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>
        </tr>
    </thead>
    @foreach ($projects as $project)
        <tbody>
            <tr class="row1" style="display:none">
                <td>
                    <form action="/projects/plan" method="post" id="statusForm{{$project->id}}">
                        @csrf
                        <input name="status" type="hidden" value="{{$project->status}}" id="isCancelled" >

            <!-- If status is 1 an unchecked checkbox -->
                        @if ($project->status == "1")

                            <input name="id" type="hidden" value="{{$project->id}}" >
                            <input  type="radio" 
                                    name="status" 
                                    onchange="document.getElementById('statusForm{{$project->id}}').submit()"
                                    data-placement="top" 
                                    title="project is requested" 
                                    data-toggle="hoverText"   
                            >
            <!-- If status is 2 an checked checkbox -->
                        @elseif ($project->status == "2")
                            <input type="radio" 
                                    name="status" 
                                    data-toggle="hoverText" 
                                    data-placement="top" 
                                    title="project is accepted"
                                    checked
                            >
            <!-- If status is 4 project is cancelled -->
                        @else
                            <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>
        </tbody>

    @endforeach
</table>

Answer 1

您需要定位行（ tr ）并将其切换，这样做直接标记该行会更容易

@foreach ($projects as $project)
    <tr class="row1 @if($project->status == 4)cancelled @endif">
        <td>
            <form action="/projects/plan" method="post" id="statusForm{{$project->id}}">
                @csrf

                <!-- If status is 1 an unchecked checkbox -->
                @if ($project->status == "1")

                    <input name="id" type="hidden" value="{{$project->id}}" >
                    <input  type="radio"
                            name="status"
                            onchange="document.getElementById('statusForm{{$project->id}}').submit()"
                            data-placement="top"
                            title="project is requested"
                            data-toggle="hoverText"
                    >
                    <!-- If status is 2 an checked checkbox -->
                @elseif ($project->status == "2")
                    <input type="radio"
                           name="status"
                           data-toggle="hoverText"
                           data-placement="top"
                           title="project is accepted"
                           checked
                    >
                    <!-- If status is 4 project is cancelled -->
                @else
                    <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>

然后使用JavaScript在cancelled类的情况下进行切换。

$(document).ready(function(){
    $(".showhide").click(function(e){
        e.preventDefault();
        $('tr.cancelled').toggle();
    });
});