为每一行添加唯一 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"   

                            >

Answer 1

您需要定位行 ( tr) 并切换它，直接标记行会更容易吗@foreach ($projects as $project)&nbsp; &nbsp; <tr class="row1 @if($project->status == 4)cancelled @endif">&nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <form action="/projects/plan" method="post" id="statusForm{{$project->id}}">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @csrf&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- If status is 1 an unchecked checkbox -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @if ($project->status == "1")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input name="id" type="hidden" value="{{$project->id}}" >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; type="radio"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="status"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onchange="document.getElementById('statusForm{{$project->id}}').submit()"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data-placement="top"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title="project is requested"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data-toggle="hoverText"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- If status is 2 an checked checkbox -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @elseif ($project->status == "2")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;name="status"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;data-toggle="hoverText"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;data-placement="top"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;title="project is accepted"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;checked&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- If status is 4 project is cancelled -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @else&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="fas fa-ban red" data-toggle="hoverText" data-placement="top"&nbsp; title="project is cancelled"></span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @endif&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; <td>{{$project->name}}</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>{{$project->contact_name}}</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>{{$project->contact_email}}</td>&nbsp; &nbsp; &nbsp; &nbsp; <td><a href="/projects/{{$project->id}}/edit" class="btn btn-secondary btn-sm" role="button">project Details</a></td>&nbsp; &nbsp; </tr>@endforeach</tbody>然后使用 JavaScript 将其与 class 切换cancelled。$(document).ready(function(){&nbsp; &nbsp; $(".showhide").click(function(e){&nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; $('tr.cancelled').toggle();&nbsp; &nbsp; });});