jQueryでテーブルを更新

Question

サーバ側では、3秒ごとにデータベースの最後の10行を出力します。

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秒ごとに新しい行を追加するのではなく、テーブルを更新するにはどうすればいいですか？

Answer 1

追加する前にテーブルの本文をクリアします。 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>'); 

} 

}）;

Answer 2

データを配列に保存してください。新しいデータが配列に追加されるたびに、更新されたデータセットで配列を再描画します。このように：

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() 
}); 

Answer 3

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

はちょうどあなたのコールバック関数すなわちの最初の行として、リストの上に追加します。：

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

FYI：ちょうどパフォーマンス向上のために、すべてのループでDOMを変更しないでください。代わりに、行を変数に追加して、ループの後にテーブルに代入するのではなく、 DOM操作は変数よりも高価です。

Answer 4

あなたはtableの内容をクリアしてからHTMLコンテンツを置くために$().appendまたは$().htmlを使用する$().emptyを使用することができます。

文字列を使用して各変数を連結する代わりに、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>