javascript - 通过ajax函数将数据回显到表

我正在尝试使用ajax函数来回显提交给表的数据。但这并没有证明我希望的那样。这些值变成了我不希望发生的值字符串，我希望该值采用表格形式。

下面是我的表格代码，

<div id="formbox">
  <form id="formTable">

    <table class="table table-hover">
      <thead>
        <tr>
          <th>Start Time</th>
          <th>End Time</th>
          <th>Monday</th>
          <th>Tuesday</th>
          <th>Wednesday</th>
          <th>Thursday</th>
          <th>Friday</th>
          <th>Saturday</th>
          <th>Sunday</th>
          <th></th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <th>
            <input type="text" class="form-control" name="startTime" id="starttime" width="50px">
          </th>
          <th>
            <input type="text" class="form-control" name="endTime" id="endtime">
          </th>
          <th>
            <input type="checkbox" name="Monday" value="1" id="monday">
          </th>
          <th>
            <input type="checkbox" name="Tuesday" value="1" id="tuesday">
          </th>
          <th>
            <input type="checkbox" name="Wednesday" value="1" id="wednesday">
          </th>
          <th>
            <input type="checkbox" name="Thursday" value="1" id="thursday">
          </th>
          <th>
            <input type="checkbox" name="Friday" value="1" id="friday">
          </th>
          <th>
            <input type="checkbox" name="Saturday" value="1" id="saturday">
          </th>
          <th>
            <input type="checkbox" name="Sunday" value="1" id="sunday">
          </th>
          <th>
            <input type="button" class="btn btn-success" value="Add" id="send">
          </th>
        </tr>
      </tbody>
    </table>

  </form>
</div>
<table class="table table-hover">
  <thead>
    <tr>
      <th>Start Time</th>
      <th>End Time</th>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
      <th>Saturday</th>
      <th>Sunday</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <div id="comment"></div>
  </tbody>
</table>

我的JavaScript代码，

  $(document).ready(function() {

    function showComment() {
      $.ajax({
        type: "post",
        url: "registerarray.php",
        data: "action=showcomment",
        success: function(data) {
          $("#comment").html(data);
        }
      });
    }
    showComment();

    $("#send").click(function() {

      var starttime = $("#starttime").val();
      var endtime = $("#endtime").val();

      if (document.getElementById('monday').checked) {
        var monday = $("#monday").val();
      }
      if (document.getElementById('tuesday').checked) {
        var tuesday = $("#tuesday").val();
      }
      if (document.getElementById('wednesday').checked) {
        var wednesday = $("#wednesday").val();
      }
      if (document.getElementById('thursday').checked) {
        var thursday = $("#thursday").val();
      }
      if (document.getElementById('friday').checked) {
        var friday = $("#friday").val();
      }
      if (document.getElementById('saturday').checked) {
        var saturday = $("#saturday").val();
      }
      if (document.getElementById('sunday').checked) {
        var sunday = $("#sunday").val();
      }



      var dataString = "starttime1=" + starttime + "&endtime1=" + endtime + "&monday1=" + monday + "&tuesday1=" + tuesday + "&wednesday1=" + wednesday + "&thursday1=" + thursday + "&friday1=" + friday + "&saturday1=" + saturday + "&sunday1=" + sunday + "&action=addcomment";

      $.ajax({
        type: "post",
        url: "registerarray.php",
        data: dataString,
        success: function(data) {
          showComment();
          $("#formTable")[0].reset();

        }

      });

    });
  });

我的寄存器数组代码，用于注册和回显数据库中的数据，

<?php

$action = $_POST["action"];

if ($action == "showcomment") {

    require_once 'dbfunction.php';
    $con = getDbConnect();

    if (!mysqli_connect_errno($con)) {
        $show = "SELECT * FROM scheduletime";

        $result = mysqli_query($con, $show);

        while ($row = mysqli_fetch_array($result)) {
            echo "<tr>";
            echo "<th>" . $row["startTime"] . "</th>";
            echo "<th>" . $row["endTime"] . "</th>";
            echo "<th>" . $row["Monday"] . "</th>";
            echo "<th>" . $row["Tuesday"] . "</th>";
            echo "<th>" . $row["Wednesday"] . "</th>";
            echo "<th>" . $row["Thursday"] . "</th>";
            echo "<th>" . $row["Friday"] . "</th>";
            echo "<th>" . $row["Saturday"] . "</th>";
            echo "<th>" . $row["Sunday"] . "</th>";
            echo "<th></th>";
            echo "</tr>";
        }

        mysqli_close($con);
    } else {
        echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }
    ?>


    <?php

} else if ($action == "addcomment") {
    require_once 'dbfunction.php';
    $con = getDbConnect();

    $starttime2 = $_POST['starttime1'];
    $endtime2 = $_POST['endtime1'];
    $monday2 = $_POST['monday1'];
    $tuesday2 = $_POST['tuesday1'];
    $wednesday2 = $_POST['wednesday1'];
    $thursday2 = $_POST['thursday1'];
    $friday2 = $_POST['friday1'];
    $saturday2 = $_POST['saturday1'];
    $sunday2 = $_POST['sunday1'];

    if (mysqli_connect_errno($con)) {
        echo "Failed to connect to MySQL: " . mysqli_connect_error();
    } else {
        $query = "INSERT INTO scheduletime (startTime, endTime, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday)" .
                "VALUES ('$starttime2', '$endtime2', '$monday2', '$tuesday2', '$wednesday2', '$thursday2', '$friday2', '$saturday2', '$sunday2')";

        mysqli_query($con, $query);
    }
    echo "Your comment has been sent";
    mysqli_close($con);
}

我收到的当前输出是一长串链接在一起的数据，而不是插值到表中。

我希望将值字符串相应地插入表中。

最佳答案

您需要创建一个包含要尝试传递的html表的字符串，而不是在while循环的每次迭代中回显结果。为此，请更改此：

   while ($row = mysqli_fetch_array($result)) {
        echo "<tr>";
        echo "<th>" . $row["startTime"] . "</th>";
        echo "<th>" . $row["endTime"] . "</th>";
        echo "<th>" . $row["Monday"] . "</th>";
        echo "<th>" . $row["Tuesday"] . "</th>";
        echo "<th>" . $row["Wednesday"] . "</th>";
        echo "<th>" . $row["Thursday"] . "</th>";
        echo "<th>" . $row["Friday"] . "</th>";
        echo "<th>" . $row["Saturday"] . "</th>";
        echo "<th>" . $row["Sunday"] . "</th>";
        echo "<th></th>";
        echo "</tr>";
    }

对此：

   $html = "";
   while ($row = mysqli_fetch_array($result)) {
        $r =  "<tr>";
        $r .=  "<td>" . $row["startTime"] . "</td>";
        $r .=  "<td>" . $row["endTime"] . "</td>";
        $r .=  "<td>" . $row["Monday"] . "</td>";
        $r .=  "<td>" . $row["Tuesday"] . "</td>";
        $r .=  "<td>" . $row["Wednesday"] . "</td>";
        $r .=  "<td>" . $row["Thursday"] . "</td>";
        $r .=  "<td>" . $row["Friday"] . "</td>";
        $r .=  "<td>" . $row["Saturday"] . "</td>";
        $r .=  "<td>" . $row["Sunday"] . "</td>";
        $r .=  "<td></td>";
        $r .=  "</tr>";
        $html .= $r;
    }
    echo $html;

更新：

现在，我看到您提供了显示#comment的代码。问题是您正在div中使用table，因此需要更改此设置，因为除非div驻留在div标记中，否则浏览器会将所有<td>放置在表外。删除该div，然后将ID添加到tbody中。

更改此：

<tbody>
  <div id="comment"></div>
</tbody>

对此：

<tbody id="comment">
</tbody>