Динамически Populate Новая строка в HTML-таблицы с помощью JavaScript / JQuery

голоса
0

У меня есть HTML-таблица, которая заполняется с помощью переменного Django:

<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');
            }

Если пользователь «Rejects» песня в данный момент, строка просто заполняются шаблонными переменными (см. Ниже)

отвергая песню

Я интересно , если есть способ , чтобы динамически заполнять строки? QuerySet Джанго ({{список}}) в настоящее время имеет 10 элементов и заполняет таблицу с 10 песен. Я хочу , чтобы иметь возможность, например , 50 элементов в QuerySet и заполнить таблицу с 10 в то время . Если Абонентская Rejects 'песня, следующий пункт из QuerySet (пункт 11) станет новой строки в таблице , и так далее.

Любая помощь будет очень признателен, спасибо! :)

Задан 19/03/2020 в 22:00
источник пользователем
На других языках...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more