Adding unique id to each row to hide/show table row based on column value - Laravel - javascript

Question

My blade template contains a table. In this table, rows with status 4 should be hidden (status 4 = canceled). Using a click event, the rows with status 4 appear. The rows with status 1 to 2 are always be displayed. Currently, this is not happening. If the first row has no status 4 the all rows are displayed. If the first row has status 4 then all rows are hidden.

My idea was to search for the status (see "s" in javascript) in the given row. If the status == 4 hide row unless the button is clicked. My function is looking only for the status of the first row. How can I make the function so it checks the status of each row, depending on this status the row will be hidden or showed? Thanks for the help.

See script:

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>

blade template

<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

You need to target the row ( tr ) and toggle it, do it is easier to just mark the row directly

@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>

Then use the JavaScript to toggle it with the class cancelled .

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