显示或隐藏基于复选框数据的 HTML 列表，Laravel 4

Show or Hide HTML Columns Table based on Checkboxes Data, Laravel 4

本文关键字：列表 HTML Laravel 数据 隐藏 复选框 显示      更新时间：2023-09-26

我有一个包含一周中的几天的 HTML 表格

|Monday|Tuesday|Wednesday|Thursday|Friday|Saturday|Sunday|
|data  |data   |----     |----    |----  |----    |---   |

并有一个关系，路由客户端，我想要显示（或不显示）列天数尊重表路由复选框中的值1。我用 0 和 1、工作日 1、空闲日 0 保存复选框数据，并使用此方法提取这些 0 和 1：

在窗体内：：打开（）

<td>Route:</td>
    <select id="day" name="day" onchange="showDays()">
        @foreach($route as $ro)
        <option value="{{ $ro['id'] .','. $ro['monday'] .','. $ro['tuesday'] .','. $ro['wednesday'] .','. $ro['thursday'] .','. $ro['friday'] .','. $ro['saturday'] .','. $ro['sunday'] }}">
            {{ $ro['name'] }} 
        </option>
        @endforeach
    </select>
    <input id="id_route" type=hidden name="id_route">

Javascript方法

 function showDays() {
    var day = $("#day").val();
    alert(day);
    var days= day.slice(-13);
    alert(days);
    //I pass the respective binary number to the respective day
    var monday= document.getElementById("monday");
    monday= day.slice(-13,-12);
    $("#monday").val(monday); //don't know if this can help me in other javascript function
    alert(monday);
    var tuesday= document.getElementById("tuesday");
    tuesday= day.slice(-11,-10);
    $("#tuesday").val(tuesday);
    alert(tuesday);
    var wednesday= document.getElementById("wednesday");
    wednesday= day.slice(-9,-8);
    $("#wednesday").val(wednesday);
    alert(wednesday);
    var thursday= document.getElementById("thursday");
    thursday= day.slice(-7,-6);
    $("#thursday").val(thursday);
    alert(thursday);
    var friday= document.getElementById("friday");
    friday= day.slice(-5,-4);
    $("#friday").val(friday);
    alert(friday);
    var saturday= document.getElementById("saturday");
    saturday= day.slice(-3,-2);
    $("#saturday").val(saturday);
    alert(saturday);
    var sunday= document.getElementById("sunday");
    sunday= day.slice(-1);
    $("#sunday").val(sunday);
    alert(sunday);
}

在我的 HTML 表格中：

<tr><!--I been thinking on doing something like this -->
    <th <a id="monday" onchange="showDays()" value="{{$route['monday']}}">MONDAY</th>
    <th <a id="tuesday" onchange="showDays()" value="{{$route['tuesday']}}">TUESDAY</th>
    <th <a id="wednesday" onchange="showDays()" value="{{$route['wednesday']}}">WEDNESDAY</th>
    <th <a id="thursday" onchange="showDays()"value="{{$route['thursday']}}">THURSDAY</th>
    <th <a id="friday" onchange="showDays()" value="{{$route['friday']}}">FRIDAY</th>
    <th <a id="saturday" onchange="showDays()" value="{{$route['saturday']}}">SATURDAY</th>
    <th <a id="sunday" onchange="showDays()" value="{{$route['sunday']}}">SUNDAY</th>
</tr>
@foreach($client as $ct)
<tr> <!--In this moment I just fill all the days with all the clients, but the idea is to fill the days respect the clients assigned by that day-->
    <td id="mondayTD">{{ $ct->client_name }}</td> 
    <td id="tuesdayTD">{{ $ct->client_name }}</td>
    <td id="wednesdayTD">{{ $ct->client_name }}</td>
    <td id="thursdayTD">{{ $ct->client_name }}</td>
    <td id="fridayTD">{{ $ct->client_name }}</td>
    <td id="saturdayTD">{{ $ct->client_name }}</td>
    <td id="sundayTD">{{ $ct->client_name }}</td>
</tr>
@endforeach

如果我这样做，我会在表的标题上得到数字 1,1,1,1,1,1,1，这是我的数据库上创建的最后一个路由的二进制值（目前不知道如何更改这些值，只显示上次创建的）。

我需要尊重在我的th上收到的值1或0来决定是否显示该列，但我不知道该怎么做，如果有人可以帮助我，我将不胜感激！谢谢！

您可以制作一个 php 页面来打印表格。这将根据 POST 传递的复选框的值打印表格。您所要做的就是使用 ajax 调用此页面并将响应放在您想要的div 中。

使用 jQuery 和 .post（），这变得非常简单：

$.post( "tablepage.php", { monday: "1", tuesday: "0" })
  .done(function( data ) {
    $( "#div" ).html(data);
  });

这应该是每次更改复选框时触发的函数的一部分。 表页.php 将通过邮寄方式接收天数的值，例如 $_POST['monday'] .使用它们生成表。$( "#divname" ).html(data);代码将 php 脚本的输出传递给div。

相关文章：