向每行添加唯一的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();
    });
});