使用JQuery向表中添加值。用PHP循环创建的表

时间:2018-07-02 09:13:09

标签: php jquery ajax html-table

我正在尝试制作一张表格,让您查看每天的登机时间。 该表是用PHP创建的。每周的每一天都有排,周六和周日除外:

<?php
for ($i = 1; $i < 8; $i++){

    $d=strtotime("+".$i." Day");
    if (date("l", $d) !== "Saturday" && date("l", $d) !== "Sunday" ){
        $daydate = $dayOfWeek[date("l",$d)] . date(" d ", $d) .  $month[date("F",$d)];

        echo "<tr>";
        echo "<td>". $daydate . "</td>";
        echo "<td></td>";
        echo "<td></td>";
        echo "<td></td>";
        echo "</tr>";

        echo '<tr class="BoardingTimeMorning">';
        echo '<td style="padding-left: 30px">
                <input class="form-check-input" type="radio" name="'.$dayOfWeek[date("l",$d)].'-to" class="BoardingMorning" value=""></input> <div class="time">0:00</div>
              </td>

            <td>
                <input class="form-check-input" type="radio" name="'.$dayOfWeek[date("l",$d)].'-to" class="BoardingMorning" value=""></input><div class="time">0:00</div>
            </td>
            <td>
                <input class="form-check-input" type="radio" name="'.$dayOfWeek[date("l",$d)].'-to" class="BoardingMorning" value=""></input><div class="time">0:00</div>
            </td>
            <td>
                <input class="form-check-input" type="radio" name="'.$dayOfWeek[date("l",$d)].'-to" class="BoardingMorning" value=""></input><div class="time">0:00</div>
            </td>   
        </tr>';
    }
}
?>

当某人选择目的地时,相应的时间需要在上表中显示。选择是通过AJAX请求完成的,并返回数组中的时间。登机时间不得超过4个。

我正在尝试使其与JQuery一起使用,但是什么也没发生。

jQuery:

$('#boardingplace').change(function() {
$.ajax({
    type: 'POST', 
url: 'reservePage.php', 
dataType: 'JSON',
data: {
        'station': this.value 
    },

    success: function(response){
        var len = response.length;
        console.log("length: "+len);

        $( ".BoardingTimeMorning" ).each(function() {

            for (var j=0; j<4; j++){
                //visibitly off
                var tdContent = $(this).find('.BoardingMorning'+j);
                console.log (tdContent);
                tdContent.css("display", "none");
                tdContent.next().html("");

                //reset value
                tdContent.attr('value', "");

                if(j - len <= 0){
                //show content according to amount of times
                tdContent.css('display', "block");
                tdContent.attr('value', response[j].slice(0,5));    
                tdContent.next().html(response[j].slice(0,5));
                }
            }
        });

    }

  });

});

使它正常工作的最佳方法是什么?

编辑: 原来我在输入元素上使用2类定义。引导程序类和另一个用于选择它的类。我把它们放在一起,所有的作品.. 感谢您对人们的帮助!真的很喜欢这个社区!

1 个答案:

答案 0 :(得分:1)

有一个简单的解决方案:

您可以创建如下的response.php文件:

以网址为例:

  

response.php?station = 162

<?php
//response.php

$station=$_GET['station'];

$data_from_database=// your sql Request...


?>
<html>
<div class="datas">

<?php

foreach ($data_from_database  as  $data) {

    echo "<span>".$data['time']."</span>";echo "<br>";
    echo "<span>".$data['name']."</span>";echo "<br>";
}
?>

</html>

在您的JavaScript中,您可以像这样从response.php文件中加载数据:

    <script type="text/javascript">
$('#boardingplace').change(function() {
var station= this.value; 
$.ajax({
type: 'GET', 
url: 'response.php?station'+station, 
    success: function(response){

        $(".BoardingTimeMorning").html(response);

    }

  });

});
</script> 

并且数据将使用class =“ BoardingTimeMorning”

加载到div中

希望这对您有所帮助。