jquery - JQuery 中的 HTML 代码

Question

我试图显示一个 HTML 表，该表由使用 AJAX 调用接收到的 JSON 值填充。这是 HTML 和 JQuery 脚本:

<div id="content"></div>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
        <script>
            $(document).on("ready", function(){
                loadData();
            }); 

            var loadData = function(){
                $.ajax({
                    type:"POST",
                    url:"http://****/current_batch_jrz.php"
                }).done(function(data){
                    console.log(data);
                    $("#content").append( "<table class='table'><caption> BATCH IN  JUAREZ</caption><thead><tbody><tr><th>CLIENTE</th><th>CERTIFICADO</th><th>PRODUCTO</th><th>LOTE</th><th>FECHA</th><th>FLUJO TREN A</th><th>VOLUMEN TREN A</th><th>FLUJO TREN B</th><th>VOLUMEN TREN B</th><th>VOLUMEN TOTAL</th></tr>");
                    var users = JSON.parse(data)["data"];
                    for(var i in users){
                        $("#content").append("<tr><td>"+users[ i ][0]+"</td><td>"+users[ i ][0]+"</td><td>"+users[ i ][0]+"</td><td>"+users[ i ][0]+"</td><td>"+users[ i ][0]+"</td><td>"+users[ i ][0]+"</td><td>"+users[ i ][0]+"</td><td>"+users[ i ][0]+"</td><td>"+users[ i ][0]+"</td><td>"+users[ i ][0]+"</td></tr>");
                    }
                    $("#content").append( "</tbody></table>");
                });
            }


        </script>

表格列标题已根据需要显示，但行未正确显示，所有值都显示在一起，如屏幕截图所示:

Answer 1

那是因为<tbody>和<table>一旦执行第一个附加(设置表头的位置)，标签就会自动关闭。尝试连接一个临时变量，然后设置 $("#content").append()有了它。