Dynamically Populați rând nou în HTML tabelul folosind Javascript / JQuery

voturi
0

Am un tabel HTML, care este populat folosind variabile 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>

Utilizatorii pot „Accept“ sau „Resping“ rânduri folosind căpușa / X pictograme: Tabelul Screenshot

Următoarele funcții Javascript sunt numite în cazul în care utilizatorii „Accept“ / „Respingeți“ un cântec:

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

Dacă un utilizator Rejects un cântec în acest moment, rândul este doar populat cu variabile substituente (vezi mai jos).

de respingere a unei melodii

Mă întreb dacă există o modalitate de a dinamic popula rândurile? Django set de interogări ({{listă de redare}}) are în prezent 10 elemente și populează tabelul cu cele 10 melodii. Vreau să fie în măsură să aibă , de exemplu , 50 de articole în setul de interogări și popula tabelul cu 10 la un moment dat . Dacă utilizatorul Rejects piesa, următorul articol din set de interogări (punctul 11) va deveni noul rând în tabel și așa mai departe.

Orice ajutor ar fi apreciat foarte mult, mulțumesc! :)

Întrebat 19/03/2020 la 22:00
sursa de către utilizator
În alte limbi...                            

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