JQuery 내의 HTML 코드

AJAX 호출을 사용하여받은 JSON 값으로 채워진 HTML 테이블을 표시하려고합니다. 이는 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 구조가 정말 엉망이 될 수 있으므로 나쁜 생각이라고 생각합니다. 그렇지 않으면 문자열에서 구조체를 빌드 한 다음 append 섹션에서 구조체를 호출하십시오. – 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 코드

답변

관련 문제