使用 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 图标“接受”或“拒绝”行：表格截图

如果用户“接受”/“拒绝”歌曲，则会调用以下 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');
            }

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

拒绝一首歌

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

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

Answer 1

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

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

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

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