javascript - Jquery 将数据堆栈附加在彼此之上，而不是超过表长度

Question

我有一些来自 AJAX GET 请求的数据，我想附加到表中。

这是我的 HTML:

                  <form>
                    <table id="project-table" class="table table-striped table-inverse table-responsive">
                        <caption>Projects</caption>
                        <thead class="thead-inverse">
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Project name</th>
                                <th scope="col">Description</th>
                                <th scope="col">Estimated time (min)</th>
                                <th scope="col">Actual time (min)</th>
                                <th scope="col">Add task</th>
                                <th scope="col">Delete project</th>
                            </tr>
                        </thead>
                        <tbody id="project-body">
                        </tbody>
                    </table>
                </form>

我想将我的数据附加到 tbody 中，其 ID 为项目主体。

我像这样附加我的数据:

        $('#project-body').append(
          `
          <tr>

          <td> <input class="form-control" type="hidden" name="projectid" id="projectid > </td>
          <td> <input class="form-control" type="text" name="projectName" id="projectName > </td>
          <td> <input class="form-control" type="text" name="description" id="description > </td>
          <td> <input class="form-control" type="text" name="estimatedTime" id="estimatedTime > </td>
          <td> <input class="form-control" type="text" name="actualTime" id="actualTime > </td>
          <td> <a id="addTask" class="btn btn-info" href="Overview.php" role="button">  <i class="fa fa-angle-right" aria-hidden="true"> </i> Add task  </td>
          <td> <button type="submit" id="deleteProject" name="deleteProject" class="btn btn-danger"> <i class="fa fa-angle-right" aria-hidden="true"> </i> Delete project </button> </td>
          </tr>

          `
        );

问题是我的所有 TD 元素似乎要么根本没有显示，要么彼此堆叠。通常我希望我的数据垂直分布在我的表格上，填充所有表格头

Answer 1

您错过了为每个输入添加 value 属性。这是一个工作示例:

$('#add-row').on('click', function(e){
  $('#project-body').append(
            `
            <tr>
                <td>
                  <input class="form-control" type="hidden" name="projectid" id="projectid  value="1">
                </td>
                <td>
                  <input class="form-control" type="text" name="projectName" id="projectName value="Some value">
                </td>
                <td>
                  <input class="form-control" type="text" name="description" id="description  value="Some value">
                </td>
                <td>
                  <input class="form-control" type="text" name="estimatedTime" id="estimatedTime  value="Some value">
                </td>
                <td>
                  <input class="form-control" type="text" name="actualTime" id="actualTime  value="Some value">
                </td>
                <td>
                  <a id="addTask" class="btn btn-info" href="Overview.php" role="button">
                    <i class="fa fa-angle-right" aria-hidden="true"> </i> Add task
                  </a>
                </td>
                <td>
                  <button type="submit" id="deleteProject" name="deleteProject" class="btn btn-danger">
                    <i class="fa fa-angle-right" aria-hidden="true"> </i> Delete project
                  </button>
                </td>
            </tr>

            `
          );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add-row">Add row</button>
<form>
                    <table id="project-table" class="table table-striped table-inverse table-responsive">
                        <caption>Projects</caption>
                        <thead class="thead-inverse">
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Project name</th>
                                <th scope="col">Description</th>
                                <th scope="col">Estimated time (min)</th>
                                <th scope="col">Actual time (min)</th>
                                <th scope="col">Add task</th>
                                <th scope="col">Delete project</th>
                            </tr>
                        </thead>
                        <tbody id="project-body">
                        </tbody>
                    </table>
                </form>

希望有帮助。