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

【问题标题】：Adding values to tables with JQuery. Table created with PHP loop使用 JQuery 向表中添加值。使用 PHP 循环创建的表
【发布时间】：2018-07-02 20:51:37
【问题描述】：

我正在尝试制作一个表格，让您可以查看每天的登机时间。该表是用 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 个类定义。引导类和另一个用于选择它的类。我把它们放在一起，所有的作品.. 感谢您帮助人们！真的很喜欢这个社区！

【问题讨论】：

"什么都没有发生"...请提供更多调试信息以缩小问题范围。您是否使用浏览器的开发人员工具来监控正在发生的事情？在您的 JS 代码中设置断点，查看网络工具以查看 AJAX 请求并检查它是否已发送，以及您得到什么响应，查看控制台是否有错误。除非您的 change 事件未正确绑定，否则我怀疑 nothing 正在发生。但是有很多地方可能会出错，仅靠代码通常不足以确定它在哪里。
响应是 json 数据吗？
一个快速观察：在我看来，var tdContent = $(this).find('.BoardingMorning'+j); 永远不会起作用 - 代码中唯一具有“BoardingMorning”类的元素是单选按钮，但它们实际上具有“BoardingMorning”类“...但是代码要求查找“BoardingMorning0”、“BoardingMorning1”等，因为将j 的值添加到了选择器中。这些类中没有任何元素，因此它永远不会选择任何东西。
你是对的。碰巧之后，虽然没有运气:( AJAX 请求工作正常。我只能在“星期一”使用它。Console.log(tdContent) 给了我这个 20x: w.fn.init [prevObject: w.fn. init(1) 每周 5 天，每天 4 次。所以数量是正确的，但它不会改变我的输入值和带有“时间”类的 div 内容。
那么你把它改成了什么？如果您仍然有损坏的代码，我们需要查看它以了解可能出现的问题。更新您的问题。

标签： php jquery ajax html-table

【解决方案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>

数据将在 div 中加载 class="BoardingTimeMorning"

希望对你有帮助。

【讨论】：