Dynamiczne wypełnianie nowy wiersz w tabeli HTML przy użyciu JavaScript / jQuery

głosy
0

Mam tabeli HTML, który jest wyświetlany przy użyciu zmiennych 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>

Użytkownicy mogą „Akceptuj” i „Reject” rzędów za pomocą kleszczy / X ikony: Tabela Screen

Następujące funkcje JavaScript są nazywane jeśli użytkownicy „Akceptuj” / „Odrzuć” utwór:

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

Jeśli użytkownik „odrzuca” piosenka w momencie, wiersz jest po prostu wypełniane zmiennych zastępczych (patrz niżej).

odrzucając piosenkę

Zastanawiam się, czy istnieje sposób, aby dynamicznie wypełnić wiersze? Django queryset ({{playlist}}) ma obecnie 10 pozycje i zapełnia tabelę z 10 utworów. Chcę móc mieć na przykład 50 elementów w queryset i wypełnić tabelę z 10 na raz . Jeśli użytkownik „odrzuca” piosenka, kolejna pozycja z queryset (pozycja 11) stałby się nowy wiersz w tabeli i tak dalej.

Każda pomoc będzie bardzo cenione, dzięki! :)

Utwórz 19/03/2020 o 22:00
źródło użytkownik
W innych językach...                            

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