HTML 테이블을 생성하고 div 요소에로드하십시오.

Question

div 요소 (id = "resultDataDistancesTable")에 HTML 테이블을로드하고 싶습니다. 그러나 생성 된 문자열은 처리되지 않습니다 (HTML (), append() 또는 innerHTML). 콘솔에 오류가 없습니다.

console.log (..) 출력을 HTML 페이지에 직접 붙여 넣으면 원하는 테이블을 얻을 수 있습니다 - 왜 내 JavaScript 코드가 작동하지 않습니까? 문자열에 문제가 있습니까?

var response = {"distances":[[0,4569,17264,6074,4986,12430,10936,11729,11280,23714,19112,24070,24974,25809,24157,27636,27323,15690,27970,22152],[4837,0,9160,1879,1872,12492,10755,15237,14468,21251,16649,17650,20574,23346,21694,31144,30831,13227,23141,19689],[17807,9681,0,8419,14314,25164,23427,28206,27140,11709,17204,18205,21130,23901,22249,30219,29906,4147,23696,10294],[6156,1736,8271,0,3191,12812,8437,16555,14788,22085,17483,18484,21408,24180,22528,30498,30185,14061,23975,20523],[5438,1642,14335,3147,0,12796,11058,15838,14771,20785,16183,17184,20108,22880,21228,31745,31432,12761,22674,19223],[12266,13371,25607,10970,13329,0,1842,20750,6094,32057,27455,28455,31380,34152,32500,37248,36935,24033,37581,30495],[10434,11651,16093,8428,11608,1842,0,19509,7092,30336,25734,26735,29659,32431,30779,35416,35104,22312,35750,28774],[12355,15633,28328,17138,16050,19963,20849,0,6457,34778,30176,26719,27624,33122,31702,30285,29973,26754,30619,33216],[11054,14433,26669,14776,14391,6088,9450,10828,0,33119,28517,36279,37184,35214,33562,39846,39533,25095,40179,31557],[21936,20085,11649,19803,18444,29293,27556,32335,31269,0,2943,8201,8702,10694,9042,17012,16699,8876,11268,5269],[19141,17291,16426,17009,15649,26499,24762,29541,28475,2924,0,5407,6515,9365,7713,15683,15370,14852,9082,6033],[22777,19065,18201,18783,17424,28274,26536,25758,31348,8188,5556,0,2979,5144,6115,10994,10681,16626,5493,10239],[23722,21760,20895,21478,20118,30968,29231,26703,32292,8634,6627,2994,0,2715,3388,4505,4192,19321,3110,11521],[29801,24947,24082,24665,23305,34155,32417,32782,38371,9673,8179,5136,2704,0,2345,4277,3964,22508,1703,15331],[25139,23289,22424,23007,21647,32497,30760,30797,34473,8016,6521,6129,3394,2340,0,5174,4862,20850,3779,13673],[26964,30242,30040,31748,30660,36952,35458,29945,35534,16511,10598,10365,4526,4274,5182,0,336,28466,1821,15492],[26628,29906,29704,31412,30324,36616,35122,29609,35198,16175,10262,10029,4190,3938,4846,313,0,28130,1485,15156],[16108,9772,4136,13975,12616,23466,21728,26507,25441,8931,10916,11916,14841,17613,15961,23930,23617,0,17407,7516],[27163,30441,23429,24012,22653,37151,35657,30144,35733,11168,9161,5495,3089,1703,3746,1686,1373,21855,0,14055],[22592,20741,10188,20459,19100,29949,28212,32991,31925,5369,5909,10225,11565,14414,12762,20732,20419,7415,14131,0]]}; 

buildResultTableDistances(); 

function buildResultTableDistances() { 
    var tbl; 
    var tr_head = "<table><tr><td>distances [meters]</td>"; 
    for (var i = 0; i < 20; i++) { 
     tr_head += "<td><b>" + "dummy" + "</b></td>"; 
    } 
    tr_head += "</tr>"; 
    tbl = tr_head; 

    for (var i = 0; i < 20; i++) { 
     var row = "<tr><td><b>" + "dummy" + "</b></td>"; 
     for (var ii = 0; ii < 20; ii++) { 
      row += "<td>" + response.distances[i][ii] + "</td>"; 
     } 
     row += "</tr>"; 
     tbl += row; 
    } 
    tbl += "</table>"; 
    console.log(tbl); 
    $('#resultDataDistancesTable').html(tbl); 
} 

Answer 1

여기에서 잘 작동하기 때문에 HTML을 삽입하거나 jQuery를 포함하는 것을 잊어 버린 것으로 의심됩니다. 당신이 원하는 경우, jQuery를에 요소를 추가하여 전적으로 자바 스크립트에서이 작업을 수행합니다 :

$(document.body).append('<div id="resultDataDistancesTable"></div>'); 

var response = {"distances":[[0,4569,17264,6074,4986,12430,10936,11729,11280,23714,19112,24070,24974,25809,24157,27636,27323,15690,27970,22152],[4837,0,9160,1879,1872,12492,10755,15237,14468,21251,16649,17650,20574,23346,21694,31144,30831,13227,23141,19689],[17807,9681,0,8419,14314,25164,23427,28206,27140,11709,17204,18205,21130,23901,22249,30219,29906,4147,23696,10294],[6156,1736,8271,0,3191,12812,8437,16555,14788,22085,17483,18484,21408,24180,22528,30498,30185,14061,23975,20523],[5438,1642,14335,3147,0,12796,11058,15838,14771,20785,16183,17184,20108,22880,21228,31745,31432,12761,22674,19223],[12266,13371,25607,10970,13329,0,1842,20750,6094,32057,27455,28455,31380,34152,32500,37248,36935,24033,37581,30495],[10434,11651,16093,8428,11608,1842,0,19509,7092,30336,25734,26735,29659,32431,30779,35416,35104,22312,35750,28774],[12355,15633,28328,17138,16050,19963,20849,0,6457,34778,30176,26719,27624,33122,31702,30285,29973,26754,30619,33216],[11054,14433,26669,14776,14391,6088,9450,10828,0,33119,28517,36279,37184,35214,33562,39846,39533,25095,40179,31557],[21936,20085,11649,19803,18444,29293,27556,32335,31269,0,2943,8201,8702,10694,9042,17012,16699,8876,11268,5269],[19141,17291,16426,17009,15649,26499,24762,29541,28475,2924,0,5407,6515,9365,7713,15683,15370,14852,9082,6033],[22777,19065,18201,18783,17424,28274,26536,25758,31348,8188,5556,0,2979,5144,6115,10994,10681,16626,5493,10239],[23722,21760,20895,21478,20118,30968,29231,26703,32292,8634,6627,2994,0,2715,3388,4505,4192,19321,3110,11521],[29801,24947,24082,24665,23305,34155,32417,32782,38371,9673,8179,5136,2704,0,2345,4277,3964,22508,1703,15331],[25139,23289,22424,23007,21647,32497,30760,30797,34473,8016,6521,6129,3394,2340,0,5174,4862,20850,3779,13673],[26964,30242,30040,31748,30660,36952,35458,29945,35534,16511,10598,10365,4526,4274,5182,0,336,28466,1821,15492],[26628,29906,29704,31412,30324,36616,35122,29609,35198,16175,10262,10029,4190,3938,4846,313,0,28130,1485,15156],[16108,9772,4136,13975,12616,23466,21728,26507,25441,8931,10916,11916,14841,17613,15961,23930,23617,0,17407,7516],[27163,30441,23429,24012,22653,37151,35657,30144,35733,11168,9161,5495,3089,1703,3746,1686,1373,21855,0,14055],[22592,20741,10188,20459,19100,29949,28212,32991,31925,5369,5909,10225,11565,14414,12762,20732,20419,7415,14131,0]]}; 
 

 
buildResultTableDistances(); 
 

 
function buildResultTableDistances() { 
 
    var tbl; 
 
    var tr_head = "<table><tr><td>distances [meters]</td>"; 
 
    for (var i = 0; i < 20; i++) { 
 
     tr_head += "<td><b>" + "dummy" + "</b></td>"; 
 
    } 
 
    tr_head += "</tr>"; 
 
    tbl = tr_head; 
 

 
    for (var i = 0; i < 20; i++) { 
 
     var row = "<tr><td><b>" + "dummy" + "</b></td>"; 
 
     for (var ii = 0; ii < 20; ii++) { 
 
      row += "<td>" + response.distances[i][ii] + "</td>"; 
 
     } 
 
     row += "</tr>"; 
 
     tbl += row; 
 
    } 
 
    tbl += "</table>"; 
 
    $('#resultDataDistancesTable').html(tbl); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="resultDataDistancesTable"></div>

Answer 2

나는 Plunker 사용하여 문제를 복제 할 수 있습니다 : http://plnkr.co/edit/QxklTx0R6WcYwpRIpd98이 수정 프로그램이 있습니다. 객체에 추가하기 전에 DOM을로드 할 때까지 기다리지 않았습니다. 3 행 참조 :

$("document").ready(function() { 
    buildResultTableDistances(); 
}); 

다음 작업을 수행해야합니다.