Ajax 表格刷新 - 网站内容应保持在表格上方答案

【问题标题】：Ajax Table refresh - Site content should stay above the TableAjax 表格刷新 - 网站内容应保持在表格上方
【发布时间】：2013-12-21 07:27:28
【问题描述】：

我想在表格上方有一些内容，但每次更新表格时，表格上方的内容都会显示在表格下方。我不明白，因为此内容不在刷新之间...我该如何解决？

<!DOCTYPE html>
<html>

    <head>
        <title>test</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <font size="2"> 
        <table class="table table-condensed" border="1" id="usertable"></table>
        </font>

        <script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&libraries=geometry"></script>
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-primary">
                <input type="checkbox">Option 1</label>
            <label class="btn btn-primary">
                <input type="checkbox">Option 2</label>
            <label class="btn btn-primary">
                <input type="checkbox">Option 3</label>
        </div>
    </head>

    <body>
        <script src="js/bootstrap.min.js"></script>
        <div class="alert alert-success"> <a href="#" class="alert-link">Die Übersicht zu Drive-Now München lädt... Bitte einen Moment Geduld!</a>

        </div>
        <script type="text/javascript">
            $(document).ready(function() {
                //..//
                $('#usertable').append(

                function() {
                    return "<tr class=" + farbe + ">" +
                    //..//
                    "<tr>";
                });
            })
            }).always(callJSON);
            }, 2000);
            }
            $(callJSON);
            });
        </script>
    </body>

</html>

【问题讨论】：

标签： jquery css ajax html-table

【解决方案1】：

可能是 html 使用您的表格呈现“tbody”，如果是这样，您的内容被放置在此标记之外。试试……

$('#usertable').find('tbody').append(...);

只是一个想法

【讨论】：

【解决方案2】：

将您的脚本更改为使用.before() 而不是.append()：

   <script type="text/javascript">
        $(document).ready(function() {
            //..//
            $('#usertable').before(

            function() {
                return "<tr class=" + farbe + ">" +
                //..//
                "<tr>";
            });
        })
        }).always(callJSON);
        }, 2000);
        }
        $(callJSON);
        });
    </script>

【讨论】：

内容还在表格下方... :(
@user2718017 我刚刚意识到您的表格位于 HTML 的 <head> 内。将内容放在那里不是一个好习惯。将表格移动到<body> 并重试。您还应该将您的<script>s 移至<head>。