添加的表格行最终位于表格上方而不是表格中

Question

我的 jQuery 自动刷新功能动态更新表格。不幸的是，由于某种原因，更新后的字符串总是在表格之前（在标题上方）被提升，因为某种原因我错过了在我的代码中看到：

html:

<div class="container"><h1>Refresh Test:</h1></div>

    <div id="table_1" class="container">

        <table class="table" style="width: 100%"> 

            <thead><tr><th>1</th><th>2</th><th>time</th></tr></thead> 

            <tbody>

                <div id="tablerow" > </div>

            </tbody>

        </table>

    </div>

jQuery 更新函数：

<script type="text/javascript">function refreshTable()  {  

    $.get(

        "/foo", "", 

        function(data) {

            $("#tablerow").html("<tr><td>" + JSON.parse(data).D1 + "</td><td>" + JSON.parse(data).D2 + "</td><td>" + JSON.parse(data).D3 + "</td></tr>")

        },

    ) 

};

window.setInterval(refreshTable, 3000)</script>

检查时我看到了该<tr> .... </tr>部分下方的内容::before。另外：如果我之前创建空表行并添加 per <td>（如下所示：在脚本中使用<tr><td><div id="NAME"></div></td></tr>with而不是并且仅使用单个值）。#NAMEtablerow

Answer 1

你可以尝试下面的代码..&nbsp; &nbsp; <script type="text/javascript">&nbsp; &nbsp; &nbsp; &nbsp;function refreshTable()&nbsp; {&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $.get(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "/foo", "",&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; function(data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if($(".table tbody").children().length > 0)){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".table").append("<tr><td>" + JSON.parse(data).D1 + "</td><td>" + JSON.parse(data).D2 + "</td><td>" + JSON.parse(data).D3 + "</td></tr>")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".table").html("<tr><td>" + JSON.parse(data).D1 + "</td><td>" + JSON.parse(data).D2 + "</td><td>" + JSON.parse(data).D3 + "</td></tr>)&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;)&nbsp;&nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; window.setInterval(refreshTable, 3000)&nbsp; &nbsp; </script>检查这个小提琴https://jsfiddle.net/0djn9f15/

Answer 2

div 不能是 tbody 的子级。给 tbody id“tablerow”，删除 div 并重试