Δυναμική Συμπλήρωση Νέα σειρά σε μορφή 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 εικονίδια: Πίνακας Screenshot

Οι ακόλουθες λειτουργίες 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');
            }

Αν ένας χρήστης «απορρίπτει», ένα τραγούδι αυτή τη στιγμή, η σειρά είναι μόλις συμπληρωθεί με μεταβλητές κράτησης θέσης (βλέπε παρακάτω).

απορρίπτοντας ένα τραγούδι

Αναρωτιέμαι αν υπάρχει τρόπος να δυναμικά συμπληρώσετε τις γραμμές; Η queryset Django ({{playlist}}) έχει επί του παρόντος 10 στοιχεία και συμπληρώνει τον πίνακα με τα 10 τραγούδια. Θέλω να είναι σε θέση να έχει για παράδειγμα 50 αντικείμενα στο queryset και συμπληρώσετε τον πίνακα με 10 σε ένα χρόνο . Εάν ο χρήστης «απορρίπτει» το τραγούδι, το επόμενο στοιχείο από το 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