リストデータをhtmlテーブルに動的に挿入する方法

Question

私はブートストラップを使用しています。これは、すべてのリスト項目を表示するテーブルです。

<table id="playlist_table" class="table table-bordered"> 
    <caption class="text-center">PLAYLIST</caption> 
    <thead> 
     <tr> 
      <th>Song Name</th> 
      <th>Singer</th> 
      <th>Film</th> 
     </tr> 
    </thead> 
    <tbody id="palylist_table_data"> 
    </tbody> 
</table> 

これは私のプレイリストである：

<ul id="playlist" class="hidden"> 
    <li Src="Ek%20duje%20ke%20vaaste%20serial%20title%20song.mp3" Title="Ek Duje Ke Vasste" Singer="Unkown" Cover="Album images/ek.jpg"> Ek Duje Ke VAste 
    </li> 
    <li Src="Lak.mp3" Title="Lakshya ko HAr haal mein Paana HAi" Singer="Shankar Mahadevan" Cover="Album images/lakshya.jpg"> LAkshya 
    </li> 
</ul> 

そして、これは私が書かれているが、私は、テーブル内のデータを取得することはできませんよjQueryのコードです。

$('.playlist li').each(function(){ 
     var song = $(this).attr('Src'); 
     var title = $(this).attr('Title'); 
     var singer = $(this).attr('Singer'); 
     var cover = $(this).attr('Cover'); 

     $('#playlist_table_data').html('<tr>' + '<td>' + '*' + '</td>' + '<td>' + song + '</td>' + '<td>' + singer + '</td>' + '<td>' + title + '</td>' + '</tr>');   
    }); 

Answer 1

あなたは、セレクタの問題のカップルを持っているだけでなく、appendするのではなく、間違ったjQueryの機能htmlを使用します。プレイリストは、ID要素であるので、代わりに '＃' を使用

// Use a document ready, to be sure it waits until all html is loaded 
jQuery(function($) { 
    // Your ul is ID playlist (#playlist), not CLASS playlist (.playlist) 
    $('#playlist li').each(function() { 
    var song = $(this).attr('Src'); 
    var title = $(this).attr('Title'); 
    var singer = $(this).attr('Singer'); 
    var cover = $(this).attr('Cover'); 

    // Your table is #playlist_table, not #playlist_table_data 
    // using .html() will replace table contents. You want .append(), to add them to the end of the table 
    $('#playlist_table').append('<tr>' + '<td>' + '*' + '</td>' + '<td>' + song + '</td>' + '<td>' + singer + '</td>' + '<td>' + title + '</td>' + '</tr>'); 

    }); 
}); 

Answer 2

：ここ

は以下working jsFiddle

注意改訂jQueryの ''

$('#playlist li').each(function() {...//code here}); 

そして、次のように最後の行に変更：（（追加）HTMLではなく（）の）

$('#playlist_table_data').append('<tr>' + '<td>' + '*' + '</td>' + '<td>' + song + '</td>' + '<td>' + singer + '</td>' + '<td>' + title + '</td>' + '</tr>');