我有一些来自 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。
我像这样附加我的数据:
$('#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 元素似乎根本没有显示或堆叠在一起。通常我希望我的数据垂直分布在我的桌子上,填充所有的表头
您错过了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>
希望能帮助到你。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句