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

    <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 将其与 class 切换cancelled。

$(document).ready(function(){

    $(".showhide").click(function(e){

        e.preventDefault();

        $('tr.cancelled').toggle();

    });

});