HTML Tablo Dinamik Doldur Yeni Satır JavaScript / JQuery kullanarak

oy
0

Django değişkenleri kullanılarak doldurulur bir HTML tablosu vardır:

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

Kullanıcılar 'Kabul Et' veya kene / X simgeleri kullanarak satırları 'Reddet' olabilir: Tablo Screenshot

kullanıcılar / Bir şarkı 'Reddet' 'Kabul, aşağıdaki JavaScript fonksiyonları denir:

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

Bir Kullanıcı 'Reddetti' şu anda bir şarkı, satır sadece yer tutucu değişkenleri ile doldurulur (aşağıya bakınız).

Bir şarkı reddetme

İçin bir yol olup olmadığını merak ediyorum dinamik satırları doldurmak? Django QuerySet ({{çalma listesi}}) bir sahiptir 10 ürün ve 10 şarkı içeren tabloyu doldurur. Ben mesela sorgu grubu 50 ürün var edebilmek istiyoruz ve bir seferde 10 ile tablo doldurmak . Kullanıcının 'Reddetti' şarkı, QuerySet (öğe 11) yanına öğe masa ve benzeri yeni satır olacak olursa.

Herhangi bir yardım çok, teşekkürler duyacağız! :)

Oluştur 19/03/2020 saat 22:00
kaynak kullanıcı
Diğer dillerde...                            

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