Html 테이블 행이 지정된 테이블에 추가되지 않음

Question

html 테이블에 json 문자열을 추가하려고합니다. 오브젝트 데이터가 올 바르지 만 테이블에 추가되지 않습니다. 내 jquery append statement에 무슨 문제가 있습니까?

function GetSongs(id) { 
     $.ajax(
     { 
      type: "Get", 
      url: "@Url.Action("GetSongs", "Game")", 
      data: { playlistId : id }, 
      success: function (data) { 
       json = data; 
       obj = JSON.parse(json); 
       for (var i = 0; i < data.length; i++) { 
        $('#song-table').append('<tr>'+ htmlEncode(obj[i].SongURL) +'</tr>'); 
       } 

      } 
     }); 
    } 

HTML 테이블 :

   <div id="player-playlist"> 
        <table id="song-table" style="width:420px"> 
         <tr> 
          <th>Song</th> 
         </tr> 
         <tr> 
          <td>http://www.youtube.com/v/CFF0mV24WCY</td> 
         </tr> 
        </table> 
       </div> 

Answer 1

을 정의하거나 제거하려면

for (var i in obj) { 
    $("#song-table").append("<tr><td>"+ obj[i].SongURL +"</td></tr>"); 
} 

또는

for (var i in obj) { 
    $("#song-table").append("<tr><td>"+ htmlEncode(obj[i].SongURL) +"</td></tr>"); 
} 

function htmlEncode(string) 
    { 
     var pre = document.createElement('pre'); 
     var text = document.createTextNode(string); 
     pre.appendChild(text); 
     return pre.innerHTML; 
    }//end htmlEncode it escapes HTML 

Answer 2

당신은 <tr>보다는 <td>에 추가하려고합니다. 로 변경합니다, 그것은 당신의 js에 정의되어 있지 않기 때문에 htmlEncode()을 제거

$('#song-table').append('<tr><td>'+ htmlEncode(obj[i].SongURL) +'</td></tr>'); 

Answer 3

출력을 디버깅 할 수

첫 번째 시도 당신이 얻는 데이터는 서버 측에서 리턴 한 JSON 문자열이며, tr 내부에 td를 추가하려고 시도하고, htmlEncode는 사용자 정의 함수 htmlEnco를 작성합니다. 다음과 같이 de

function GetSongs(id) { 
     $.ajax(
     { 
      type: "Get", 
      url: "@Url.Action("GetSongs", "Game")", 
      data: { playlistId : id }, 
      success: function (data) { 
       console.log(data); 
       json = data; 
       obj = $.parseJSON(json); 
       for (var i = 0; i < data.length; i++) { 
        $('#song-table').append('<tr><td>'+ htmlEncode(obj[i].SongURL) +'</td></tr>'); 
       } 

      } 
     }); 
    } 

function htmlEncode (value) { 
    if (value) { 
     return jQuery('<div />').text(value).html(); 
    } else { 
     return ''; 
    } 
}