Question

我正在使用bootstrap。这是我想要显示所有列表项的表。

<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

由于播放列表是ID元素，因此请使用“＃”代替“。”

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

并更改最后一行，如下所示:( append（）而不是html（））

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

如何将列表数据动态插入到html表中

1 个答案: