Как я могу очистить / обновить sh мою таблицу перед получением новых данных из API? - PullRequest
Новая
       23

Как я могу очистить / обновить sh мою таблицу перед получением новых данных из API?

0 голосов
/ 06 мая 2020
• 1000 * 
    const showData = document.querySelector('.showData')
    const btn = document.querySelector('.shwData-btn')


    btn.addEventListener('click', showdata)


    function showdata(){

    fetch('http://localhost:5000/posts')
    .then(res => res.json())
    .then(data=>{
        data.forEach(item =>{
            const id = item['_id']
            const name = item.name
            const email = item.email
            const age = item.age

            const tr = document.createElement('tr')

            tr.innerHTML = `

                <tr>
            <td>${id}</td>
            <td>${name}</td>
            <td>${email}</td>
            <td>${age}</td> 
            </tr>
            `

            showData.appendChild(tr)

    })})}


<!-- language: lang-html -->

    <button class="shwData-btn">Showdata</button>
            <table class="showData">
                <tr>
                    <td>id</td>
                    <td>email</td>
                    <td>name</td>
                    <td>age</td>
                </tr>

            </table>

1 Ответ

0 голосов
/ 06 мая 2020

Вам нужно будет отобразить пустую таблицу или очистить все строки (tr), прежде чем заполнять ее данными. 

const showData = document.querySelector('.showData')
    const btn = document.querySelector('.shwData-btn')


    btn.addEventListener('click', showdata)


    function showdata(){

    fetch('http://localhost:5000/posts')
    .then(res => res.json())
    .then(data=>{
// Clear your table here or populate with blank data
// tbody because you do not want to clear column heading. Make sure you have tbody and theader
$(".showData tbody tr").remove();

        data.forEach(item =>{
            const id = item['_id']
            const name = item.name
            const email = item.email
            const age = item.age

            const tr = document.createElement('tr')

            tr.innerHTML = `

                <tr>
            <td>${id}</td>
            <td>${name}</td>
            <td>${email}</td>
            <td>${age}</td> 
            </tr>
            `

            showData.appendChild(tr)

    })})}


<!-- language: lang-html -->

    <button class="shwData-btn">Showdata</button>
            <table class="showData">
                <tr>
                    <td>id</td>
                    <td>email</td>
                    <td>name</td>
                    <td>age</td>
                </tr>

            </table>

Настоятельно рекомендую также взглянуть на это: Удалить все строки в HTML таблице

...