JQuery中的HTML代码

我想显示一个HTML表格，它使用AJAX调用接收的JSON值填充。这是HTML和jQuery脚本：JQuery中的HTML代码

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

为所需的表列头所显示的，但该行没有显示正确，所有值显示在一起，你可以在截图中看到：

来源

2016-07-26 mvasco

尝试在追加它之前建立一个字符串。 – Radmation

不是一个答案，但我认为在jquery/js中的html结构是一个坏主意，因为它会变得非常混乱。否则，在字符串中构建结构，然后在附加部分调用它。 – nCore

实际生成的html如何看起来像？ – empiric

(document).on("ready", function() { 
    loadData(); 
}); 

var loadData = function() { 
    $.ajax({ 
     type: "POST", 
     url: "http://201.128.9.14:8081/current_batch_jrz.php" 
    }).done(function (data) { 
     console.log(data); 
     var stringBuilder = "<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) { 
      stringBuilder += "<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>"; 
     } 
     stringBuilder += "</tbody></table>"; 
     $("#content").append(stringBuilder); 
    }); 
}

jQuery的.append()自动关闭的标签。

此代码仅使用.append()一次，而是建立一个字符串以供稍后使用。

来源

2016-07-26 18:53:50 Radmation

谢谢，它工作正常 – mvasco

这是因为<tbody>和<table>标签在第一次追加（您设置了表头）时会自动关闭。尝试连接一个临时变量，然后使用它设置$("#content").append()。

来源

2016-07-26 19:18:44 Prabhat

JQuery中的HTML代码

回答

相关问题