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

回答

相關問題