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

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

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

    <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>

检查这个小提琴https://jsfiddle.net/0djn9f15/

Answer 2

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