Wie Sie die Listendaten dynamisch in eine HTML-Tabelle einfügen

Question

Ich benutze Bootstrap. Dies ist die Tabelle, in der alle Listenelemente angezeigt werden sollen.

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

Dies ist meine Playlist:

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

Und dies ist der JQuery Code, den ich geschrieben habe, aber ich bin nicht imstande, alle Daten in der Tabelle zu erhalten.

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

Sie haben ein paar Wähler Fragen sowie mit der falschen Funktion jQuery html statt append.

Hier ist ein working jsFiddle

Notiere die überarbeitete unter jQuery: ''

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

Da Playlist ein ID-Element ist, verwenden Sie '#' statt

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

Und die letzte Zeile ändern wie folgt aus: (append() anstelle von HTML())

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