使用jQuery更新表格

在服務器端，我每3秒發出一次數據庫的最後10行;使用jQuery更新表格

setInterval(function() { 
       connection.query("SELECT * FROM report ORDER BY id DESC limit 10", function(err, rows) { 
       if (err) console.log(err); 
       else { 
        console.log("Last 10 record emitted."); 
       // console.log("rows: " + JSON.stringify(rows, null, 3)); 
        io.emit("last_list", rows) 
       } 
       }); 
      }, 3000);

在客戶端，我追加這些行表;

socket.on('last_list', function(rows) { 
    for (var i = 0; i < rows.length; i++) { 
     var row = rows[i]; 

     $('#myTable').append('<tr><td>' + row.id + '</td><td>' + row.fabrika + '</td><td>' + 
     row.kumes + '</td><td>' + row.makina + '</td><td>' + row.kat + '</td><td>' + 
     row.sol_sag + '</td><td style="color: rgba(25, 44, 44, 1); font-weight: bolder;">' + 
     row.adet + '</td></tr>'); 

    } 
    });

我的問題是，我怎麼能更新表，而不是每3秒添加新的行？

來源

2017-08-13 ilvthsgm

什麼是添加新行和更新表之間的區別？ –

這是否意味着您要清除表並重新加載整個數據？ – Imran

@ user1041953這正是我想要實現的。 – ilvthsgm

每次追加前都清除表體。你可以給你的tbody一個ID並清除它，像$（「＃tbody」）。html（「」），或者你可以用下面的方法。

socket.on('last_list', function(rows) { 
$('#myTable tbody').html(""); 
for (var i = 0; i < rows.length; i++) { 
    var row = rows[i]; 



    $('#myTable').append('<tr><td>' + row.id + '</td><td>' + row.fabrika + '</td><td>' + 
    row.kumes + '</td><td>' + row.makina + '</td><td>' + row.kat + '</td><td>' + 
    row.sol_sag + '</td><td style="color: rgba(25, 44, 44, 1); font-weight: bolder;">' + 
    row.adet + '</td></tr>'); 

}

}）;

來源

2017-08-13 12:16:39 Imran

將數據保存在數組中。每次新數據都會附加到數組中，並使用更新的數據集重新渲染數組。像這樣：

var data = [] 
var tableContainer = $('#myTable') 

function renderTable() { 
    tableContainer.innerHTML = data.map(function(row) { 
    return '<tr><td>' + row.id + '</td><td>' + row.fabrika + '</td><td>' + 
     row.kumes + '</td><td>' + row.makina + '</td><td>' + row.kat + '</td><td>' + 
     row.sol_sag + '</td><td style="color: rgba(25, 44, 44, 1); font-weight: bolder;">' + 
     row.adet + '</td></tr>' 
    }).join('') 
} 

function updateData(newData) { 
    newData.forEach(function(item) { 
    data.push(item) 
    }) 
} 

socket.on('last_list', function(rows) { 
    updateData(rows) 
    renderTable() 
});

來源

2017-08-13 12:16:20 lukaleli

$('#myTable').empty();

上面所列內容只需添加爲你的回調函數，即第一行：

socket.on('last_list', function(rows) { 
    $('#myTable').empty(); 
    //REST OF YOUR CODE AS IS HERE... 
});

FYI：只是爲了更好的性能，不改變與每一個循環的DOM。相反，請將行添加到變量中，並在循環後將其分配給您的表。 DOM操作比變量要昂貴。

來源

2017-08-13 12:21:54 iMatoria

您可以使用$().empty以清除table的內容，然後使用$().append或$().html把HTML內容。

也可以使用template string，即backticks來更方便地創建mutliline html內容，而不是使用字符串並連接每個變量。

function generateTable(row) { 
 

 
    return ` 
 
     <tr> 
 
     <td>${row.id}</td> 
 
     <td>${row.fabrika}</td> 
 
     <td>${row.kumes}</td> 
 
     <td>${row.makina}</td> 
 
     <td>${row.kat}</td> 
 
     <td>${row.sol_sag}</td> 
 
     <td style="color: rgba(25, 44, 44, 1); font-weight: bolder;">${row.adet}</td> 
 
     </tr> 
 
    ` 
 
} 
 

 
var rows = [{ 
 
    id: '1', 
 
    fabrika: '2', 
 
    kumes: '3', 
 
    makina: '4', 
 
    kat: '5', 
 
    sol_sag: '6', 
 
    adet: '7' 
 
}, { 
 
    id: '2', 
 
    fabrika: '3', 
 
    kumes: '4', 
 
    makina: '5', 
 
    kat: '6', 
 
    sol_sag: '7', 
 
    adet: '8' 
 
}] 
 

 
setTimeout(() => { 
 
    $('table').empty(); 
 
    $('table').append(generateTable(rows[0])); 
 
}, 1000) 
 

 
setTimeout(() => { 
 
    $('table').empty(); 
 
    $('table').append(generateTable(rows[1])); 
 
}, 1000)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table> 
 
</table>

來源

2017-08-13 12:27:11

使用jQuery更新表格

回答

相關問題