गतिशील रूप से आबाद एचटीएमएल तालिका में नई पंक्ति जावास्क्रिप्ट / JQuery का उपयोग कर

वोट
0

मैं जो Django चर का उपयोग कर से भर जाता है एक HTML तालिका है:

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

उपयोगकर्ता 'स्वीकार' कर सकते हैं या टिक / एक्स आइकन का उपयोग करके पंक्तियों 'अस्वीकृत करें': टेबल स्क्रीनशॉट

निम्नलिखित जावास्क्रिप्ट कार्यों कहा जाता है, तो उन 'स्वीकार' / एक गीत 'अस्वीकृत करें':

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

यदि कोई उपयोगकर्ता 'अस्वीकृत' पल में एक गाना है, पंक्ति सिर्फ प्लेसहोल्डर चर के साथ से भर जाता है (नीचे देखें)।

एक गीत खारिज

अगर वहाँ एक रास्ता है मैं सोच रहा हूँ गतिशील पंक्तियों को पॉप्युलेट? Django क्वेरीसमूह ({{प्लेलिस्ट}}) वर्तमान में है 10 वस्तुओं और के साथ 10 गाने तालिका भरता है। मैं उदाहरण के लिए क्वेरीसमूह में 50 आइटम नहीं हैं करने के लिए सक्षम होना चाहते हैं और एक समय में 10 के साथ तालिका पॉप्युलेट । उपयोगकर्ता अस्वीकृत 'गीत, क्वेरीसमूह (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