Dynamiquement Nouvelle ligne Populate en HTML Table avec Javascript / JQuery

voix
0

J'ai une table HTML qui est rempli en utilisant les variables 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>

Les utilisateurs peuvent les lignes « Accepter » ou « Refuser » en utilisant les icônes de tiques / X: Tableau Capture d' écran

Les fonctions suivantes Javascript sont appelées si les utilisateurs « Accept » / « reject » une chanson:

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

Si un utilisateur « Rejects » une chanson pour le moment, la ligne est juste peuplée avec des variables d'espace réservé (voir ci-dessous).

rejeter une chanson

Je me demande s'il y a un moyen de dynamiquement peupler les lignes? Django queryset ({{playlist}}) a actuellement 10 articles et renseigne la table avec les 10 chansons. Je veux être en mesure d'avoir par exemple 50 articles dans la queryset et de compléter le tableau avec 10 à la fois . Si l'utilisateur « » Rejects la chanson, l'élément suivant de la queryset (point 11) deviendrait la nouvelle ligne de la table et ainsi de suite.

Toute aide serait très apprécié, merci! :)

Créé 19/03/2020 à 22:00
source utilisateur
Dans d'autres langues...                            

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