[英]Adding unique id to each row to hide/show table row based on column value - Laravel - javascript
My blade template contains a table. 我的刀片服务器模板包含一个表。 In this table, rows with status 4 should be hidden (status 4 = canceled). 在此表中,状态为4的行应被隐藏(状态4 =取消)。 Using a click event, the rows with status 4 appear. 使用单击事件,将显示状态为4的行。 The rows with status 1 to 2 are always be displayed. 始终显示状态为1到2的行。 Currently, this is not happening. 目前,这还没有发生。 If the first row has no status 4 the all rows are displayed. 如果第一行没有状态4,则显示所有行。 If the first row has status 4 then all rows are hidden. 如果第一行的状态为4,则所有行均被隐藏。
My idea was to search for the status (see "s" in javascript) in the given row. 我的想法是在给定的行中搜索状态(请参见javascript中的“ s”)。 If the status == 4 hide row unless the button is clicked. 如果状态== 4,则隐藏行,除非单击该按钮。 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: 查看脚本:
<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"
>
<!-- 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>
You need to target the row ( tr
) and toggle it, do it is easier to just mark the row directly 您需要定位行( 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>
Then use the JavaScript to toggle it with the class cancelled
. 然后使用JavaScript在cancelled
类的情况下进行切换。
$(document).ready(function(){
$(".showhide").click(function(e){
e.preventDefault();
$('tr.cancelled').toggle();
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.