Liste verilerini dinamik olarak bir html tablosuna ekleme

Question

Bootstrap kullanıyorum. Bu, tüm liste öğelerinin görünmesini istediğim tablodur.

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

Bu

benim çalma listesi ise:

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

Ve bu yazdım jQuery kodu ama tabloda herhangi bir veri elde etmek mümkün değilim.

$('.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

Sen seçici sorunları bir çift var, hem de append yerine yanlış jQuery işlevini html kullanarak.

İşte working jsFiddle

Not aşağıda revize jQuery var: ''

// 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

çalma listesi bir kimlik unsuru olduğundan, yerine '#' kullanmak

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

Ve aşağıdaki gibi son satırı değiştirin: ((ekleme) yerine html() ait)

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