根据列值向 hide/show table 行的每一行添加唯一 ID - Laravel - javascript

Question

我的 blade 模板包含一个 table。在此 table 中，应隐藏状态为 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>

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

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

根据列值向 hide/show table 行的每一行添加唯一 ID - Laravel - javascript

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

javascript

html-table

onclick

show-hide

laravel

Javascript

blade 模板