Dinamikusan feltölteni új sor HTML táblázat segítségével Javascript / JQuery

szavazat
0

Van egy HTML táblázat, amely lakott segítségével Django változó:

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

A felhasználók az „Elfogadás” vagy „Elutasítás” sorok között a kullancs / X ikonok: Tábla képernyőkép

A következő JavaScript függvények, ha a felhasználók az „Elfogadás” / „Elutasítás” egy dalt:

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

Ha a Felhasználó Rejects egy dalt abban a pillanatban, a sor csak lakott helykitöltő változókat is (lásd alább).

elutasító dal

Én kíváncsi vagyok, ha van egy módja annak, hogy dinamikusan feltölti a sort? A Django lekérdezéskészlethez ({{lejátszási lista}}) jelenleg 10 tételek, és feltölti az asztalon a 10 dalt. Azt akarom, hogy képes legyen például 50 példány a lekérdezéskészlethez és feltölti a táblázatot 10 egy időben . Ha a felhasználó „Rejects” a dalt, a következő elemet a lekérdezéskészlethez (11. tétel) lesz az új sort a táblázatban, és így tovább.

Bármilyen segítség lenne igen nagy népszerűségnek örvend, köszönöm! :)

A kérdést 19/03/2020 22:00
a forrás felhasználó
Más nyelveken...                            

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