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

Question

我的 Blade 模板包含一个表格。在此表中，状态为 4 的行应隐藏(状态 4 = 已取消)。使用单击事件，会出现状态为 4 的行。始终显示状态为 1 至 2 的行。目前，这种情况还没有发生。如果第一行没有状态 4，则显示所有行。如果第一行的状态为 4，则所有行都被隐藏。

我的想法是搜索给定行中的状态(请参阅 JavaScript 中的“s”)。如果 status == 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>

Blade 模板

<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();
    });
});