使用 Javascript/JQuery 在 HTML 表中动态填充新行

Question

我有一个使用 Django 变量填充的 HTML 表：

<h3>Recommended Playlist</h3>
        <table class="table table-dark" id="playlist_table">
            <thead>
                <tr>
                    <th scope="col">
                        <h4>Artist</h4></th>
                    <th scope="col">
                        <h4>Track</h4></th>
                    <th scope="col" style="display:none;">
                        <h4>Track ID</h4></th>
                    <th scope="col">
                        <h4>Album</h4></th>
                    <th scope="col" colspan="2">
                        <h4>Accept/Reject</h4></th>
                </tr>
            </thead>
            <tbody>
                {% for song in playlist %}
                <tr>
                    <td>{{song.artist_name}}</td>
                    <td>{{song.track_name}}</td>
                    <td style="display:none;" class="song_id">{{song.track_id}}</td>
                    <td>{{song.album_name}}</td>
                    <td class="approve"><i class="fas fa-check-circle fa-2x" onclick="approveRow(this)"></i></td>
                    <td class="reject"><i class="fas fa-times-circle fa-2x" onclick="deleteRow(this)"></i></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>

用户可以使用勾号/X 图标“接受”或“拒绝”行： Table Screenshot

如果用户“接受”/“拒绝”一首歌曲，则会调用以下 Javascript 函数：

//if a user accepts a row
function approveRow(r) {
                var i = r.parentNode.parentNode.rowIndex;
                var row = document.getElementById("playlist_table").rows[i];
                row.deleteCell(5);
                row.deleteCell(4);
                var blank1 = row.insertCell(4); //green tick once song approved
                blank1.innerHTML = '<center><i class="fas fa-check-circle fa-2x" style="color:#00ee21;"></i></center>';
                //order of above is important as once a cell is deleted, the other's index is index-1
                approve_counter++;
                console.log(approve_counter);
                song_selection.push('Accept');
            }

//if a user rejects a row
function deleteRow(r) {
                var i = r.parentNode.parentNode.rowIndex;
                document.getElementById("playlist_table").deleteRow(i);//delete existing row
                var table = document.getElementById("playlist_table");
                var row = table.insertRow(i); //insert new blank row
                var artist = row.insertCell(0);
                var track = row.insertCell(1);
                var album = row.insertCell(2);
                var approve = row.insertCell(3);
                var reject = row.insertCell(4);
                artist.innerHTML = "New Artist";
                track.innerHTML = "New Track";
                album.innerHTML = "New Album";
                approve.className = 'approve';
                reject.className = 'reject';
                approve.innerHTML='<i class="fas fa-check-circle fa-2x" onclick="approveRow(this)"></i>';
                reject.innerHTML='<i class="fas fa-times-circle fa-2x" onclick="deleteRow(this)"></i>';
                reject_counter++;
                console.log(reject_counter);
                song_selection.push('Reject');
            }

如果用户此刻“拒绝”一首歌曲，则该行仅填充占位符变量（见下文）。

rejecting a song

我想知道是否有办法动态 填充行？ Django 查询集 ({{playlist}}) 目前有 10 个项目，并用 10 首歌曲填充表格。我希望能够在查询集中拥有例如 50 个项目，并一次用 10 个填充表。如果用户“拒绝”歌曲，则查询集中的下一项（第 11 项）将成为表中的新行，依此类推。

任何帮助将不胜感激，谢谢！ :)

Answer 1

有几种方法可以解决这个问题。

你会得到所有的歌曲，并在你的 Django 视图中通过上下文传递它们。然后将它们添加到HTML and then access them via JavaScript 上的数据属性中。这将允许您在 JavaScript 中执行所有逻辑。

另一个更理想的选择（尤其是可能有数千首歌曲）是使用 Django Rest 框架并设置一个带有分页的视图，您可以在其中一次获取特定数量的歌曲。您可以通过 JavaScript 中的 AJAX 调用访问此视图。 Django Rest Framework 视图将返回下一个 X 数量歌曲的 JSON 响应。

https://www.django-rest-framework.org/api-guide/pagination/