【问题标题】:Show or Hide HTML Columns Table based on Checkboxes Data, Laravel 4基于复选框数据显示或隐藏 HTML 列表,Laravel 4
【发布时间】:2015-01-29 01:04:57
【问题描述】:

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

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

并且有一个 Relation、Route-Client 和我想显示(或不显示)列 days 尊重来自 Table Route 的复选框中的值 1。我用 0 和 1、工作日 1、空闲日 0 保存复选框数据,并用这种方法提取那些 0 和 1:

在 Form::open() 中

<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,它们是在我的 DB 上创建的最后一个路由的二进制值(暂时不要'不知道如何更改这些值,只显示最后创建的)。

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

【问题讨论】:

    标签: javascript php html laravel checkbox


    【解决方案1】:

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

    使用 jQuery 和 .post(),这变得非常简单:

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

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

    【讨论】:

      猜你喜欢
      • 2015-10-03
      • 2019-09-16
      • 2020-03-31
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-05-26
      • 1970-01-01
      • 2017-03-11
      相关资源
      最近更新 更多