将AJAX结果显示在表中

Question

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

代码运行良好，不过，现在我正试图让数据在表中正确显示。但是，调用ajax脚本结果的HTML使用DIV或P HTML标记中的ID，该ID在表中没有正确显示，而是在预期表的顶部显示。(见屏幕截图) 在这里输入图像描述

我认为，通过将代码连同输出结果的ID一起放入DIV标记中，is将显示结果，包括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>

有趣的是，您提供的代码确实起作用了，但有时在加载页面时，表数据位于表引导容器中，而有时则不在。下面是到该页面的链接。https://eaa309.club/calendar.asp

每当表没有在容器中加载时，第一行就表示没有要显示的数据。其他情况下，当我刷新页面时，它确实正确地加载：

在这里输入图像描述 在这里输入图像描述

顺便说一句，我试图将我的代码粘贴到他的帖子中，但它并不喜欢，所以我包括了一个屏幕截图(讨厌)--对不起

在这里输入图像描述

Answer 1

从表主体中删除div (如果可以的话)。并且，将脚本也移出那里(如果可以的话)。无论哪种方式，您都可以直接附加到tbody中，如下所示。

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