Question

人们，我有一些AJAX代码，可查询Google日历并通过名为myList的结果列表变量引入当前月份的活动。

代码工作正常，但是现在我试图使数据正确显示在表中。但是，用于从ajax脚本调用结果的HTML使用DIV或P HTML标记内的ID，该标记不能正确显示在表中，而是显示在预期表的顶部。（请参见屏幕截图） enter image description here

我认为，通过将代码和输出结果的ID一起放入DIV标签，可以显示结果，包括TR和TD的开始和结束标签。看看：

<div class="container scroll">
  <table class="table isSearch" cellspacing="0">
    <thead>
      <tr class="table-heads ">
        <th class="head-item mbr-fonts-style display-7">
          EVENT TITLE
        </th>
        <th class="head-item mbr-fonts-style display-7">
          DATE &amp; TIME
        </th>
        <th class="head-item mbr-fonts-style display-7">
          DETAILS
        </th>
      </tr>
    </thead>

    <tbody>
      <div id="myList"></div>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script>
        //Jquery's ajax request
        $.ajax({
          type: 'GET',
          url: '<% str_getDate %>',

          dataType: 'json',
          async: true
        })
          .done(function(data) {
            //once we get a successful response this callback function
            //gets fired, and "data" contains the parsed JSON file.

            //here we iterate over the object array
            $.each(data.items, function(i, item) {
              //I do this to later format these timestamps
              //set options for date.toLocaleDateString() function

              var options = { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' };

              let start = new Date(item.start.dateTime).toLocaleDateString('en-US', options);

              let end = new Date(item.end.dateTime).toLocaleDateString('en-US', options);

              let end_splt = end.split(',');

              //append data to the list.

              if (item.status != 'cancelled') {
                $('#myList').append(`

                                                    <tr><td class='body-item mbr-fonts-style display-7'>${
                                                      item.summary
                                                    }</td><td class='body-item mbr-fonts-style display-7'>${start} - ${
                  end_splt[1]
                }</td><td class='body-item mbr-fonts-style display-7'>${item.description}</td></tr>

                                                    `);
              }
            });
          })
          .fail(function(e) {
            error(e);
          });

        var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
      </script>
    </tbody>
  </table>
</div>

有趣的是，您提供的代码确实起作用，但是有时在加载页面时，表数据位于表Bootstrap容器中，有时却没有。这是页面的链接。 https://eaa309.club/calendar.asp

无论何时表未在容器中加载，第一行都将指示没有要显示的数据。其他时间，当我刷新页面时，页面会正确加载：
enter image description here enter image description here

通过这种方式，我尝试将代码粘贴到他发布的内容中，但是它不是那样的，所以我提供了一个屏幕截图（YUCK）对不起

enter image description here

Answer 1

从表格正文中删除div（如果可以）。并且，也将脚本移到那里（如果可以的话）。无论哪种方式，您都可以像这样直接附加到tbody上。

            $('table.isSearch tbody').append(`

将AJAX结果显示到表格中

1 个答案: