Dynamisch Populate Neue Zeile in HTML Tabelle mit Javascript / JQuery

stimmen
0

Ich habe eine HTML-Tabelle, die Django Variablen bevölkert wird mit:

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

Benutzer können ‚Annehmen‘ oder ‚Ablehnen‘ Reihen unter Verwendung der Zecke / X - Symbole: Tabelle Screenshot

Die folgenden Javascript-Funktionen aufgerufen werden, wenn der Benutzer auf ‚Akzeptieren‘ / ‚Ablehnen‘ ein 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');
            }

Wenn ein Benutzer Rejects ein Lied im Moment, wird die Zeile nur mit Platzhalter-Variablen bevölkert (siehe unten).

Ablehnung eines Songs

Ich frage mich , ob es einen Weg gibt , um dynamisch die Zeilen zu füllen? Die Django queryset ({{Playlist}}) hat derzeit 10 Objekte und füllt die Tabelle mit den 10 Songs. Ich möchte zum Beispiel 50 Elemente in der queryset und in der Lage sein , die Tabelle zu einem Zeitpunkt mit 10 bevölkern . Wenn der Benutzer Rejects das Lied, das nächste Element aus dem queryset (Punkt 11) würde die neue Zeile in der Tabelle werden und so weiter.

Jede Hilfe wäre sehr geschätzt, Dank! :)

Veröffentlicht am 19/03/2020 um 22:00
quelle vom benutzer
In anderen Sprachen...                            

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