Dynamisch Populate nieuwe rij in HTML-tabel met behulp van Javascript / JQuery

stemmen
0

Ik heb een HTML-tabel die wordt gevuld door Django variabelen:

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

Gebruikers kunnen 'Accepteren' of 'Afwijzen' rijen met behulp van de teek / X pictogrammen: Screenshot van de tafel

De volgende Javascript functies worden genoemd als gebruikers 'Accepteren' / 'Afwijzen' een lied:

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

Als een gebruiker 'Rejects' een nummer op het moment, wordt de rij gewoon gevuld met placeholder variabelen (zie hieronder).

afwijzing van een lied

Ik ben benieuwd of er een manier is om dynamisch te bevolken de rijen? De Django queryset ({{playlist}}) heeft op dit moment 10 punten en vult de tafel met de 10 songs. Ik wil in staat zijn om bijvoorbeeld hebben 50 items in de queryset en bevolken de tafel met 10 tegelijk . Als de gebruiker 'Rejects het lied, het volgende item uit de queryset (punt 11) de nieuwe rij in de tabel en ga zo maar door zou worden.

Alle hulp zou zeer gewaardeerd worden, bedankt! :)

De vraag is gesteld op 19/03/2020 om 22:00
bron van user
In andere talen...                            

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