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

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部分下。另外:如果我之前创建空表行并添加每个 <td> (像这样: <tr><td><div id="NAME"></div></td></tr> 在脚本中使用 #NAME 而不是 tablerow 并且只有一个值)。

Answer 1

您可以尝试下面的代码..

    <script type="text/javascript">
       function refreshTable()  {  
        $.get(
            "/foo", "", 
            function(data) {
           if($(".table tbody").children().length > 0)){
                $(".table").append("<tr><td>" + JSON.parse(data).D1 + "</td><td>" + JSON.parse(data).D2 + "</td><td>" + JSON.parse(data).D3 + "</td></tr>")
            }
            else{
                $(".table").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>

检查这个 fiddle https://jsfiddle.net/0djn9f15/