使用mysql數據更新HTML表單元，而不是添加新單元

Question

我正在嘗試實現兩件事，我都遇到了問題。

第一種是當我的函數按間隔運行時，它將新單元格添加到表中，而不是更新當前可能已經存在的單元格。

第二，我要創建的表格布局為向下12行的10列，其中單元格受到這些度量的限制，而不是一次顯示所有120個單元格（我尚未為此部分創建CSS或腳本因為環顧互聯網后，我找不到從何處開始的參考。）

<script type="text/javascript">
    $(document).ready(function(){
        console.log(1+0);
        $.ajax({
            url: 'fetch.php',
            type: 'get',
            //type: 'post',
            dataType: 'JSON',
            success: function(response){
                var len = response.length;
                for(var i=0; i<len; i++){
                  var beacon = response[i].beacon;
                  var location = response[i].location;

                  var tr_str = "<tr>" +
                  "<td align='center'>" + beacon + "</td>" +
                  "<td align='center'> <span class='minutes'>00</span>:<span class='seconds'>00</span> </td>" +
                  "</tr>";

                  $("#userTable tbody").append(tr_str); 
                }
                setInterval(updateTable, 10000);
            }
        })
    })

    function updateTable() {
        console.log(1+1);
        $.ajax({
            url: 'fetch.php',
            type: 'get',
            //type: 'post',
            dataType: 'JSON',
            success: function(response){
                var len = response.length;
                for(var i=0; i<len; i++){
                  var beacon = response[i].beacon;
                  var location = response[i].location;

                  var tr_str = "<tr>" +
                  "<td align='center'>" + beacon + "</td>" +
                  "</tr>";

                  $("#userTable tbody").append(tr_str);
                  /*( i have been told this part is the issue as to why the cells get added rather than updated but im not sure how i need to correct it to resolve this issue)*/

                }        
            }
        });
     };
</script>

Answer 1

對於第一個提示：

1. 在創建行時為行定義一個ID

var tr_str = "<tr id='"+ beacon +"'>";

2. 因此，現在您可以添加或替換更新功能（如果存在）；

var $table = $("#userTable tbody");
var $row = $('tr#'+beacon);

if($row.length) $row.replaceWith(tr_str);
else $table.append($newRow);

Answer 2

避免搜索特定的HTML元素並進行更新：

更新HTML尤其是更新表的特定單元格時總是很棘手。 表結構越復雜，更新就越困難。 如果操作正確，它可以正常工作，但是很混亂。

更好的方法是將data保留在內存中，並在data更改時重新生成表。

例：

 function generateFakeData(){ const data = []; const max = Math.floor(Math.random() * 100); for(let i = 0; i < max; i++){ const beacon = Math.floor(Math.random() * 100); const location = Math.floor(Math.random() * 100); data.push({id: i, beacon, location}); } return data; } const $table = $('#table > tbody'); const data = []; function start(){ //immediately load data fetchData(); //load data every 10 seconds setInterval(fetchData, 1000); } function fetchData(){ //Do ajax request here const response = generateFakeData(); //On success call update data handleNewData(response); } function handleNewData(response){ response.forEach(({id, location, beacon})=>{ const item = data.find(item=>item.id === id); //if item exists if(item){ item.location = location; item.beacon = beacon; } else { //item doesn't exist so add it data.push({id, location, beacon}); } }) //after data has been updated //update html updateTable(); } function updateTable(){ $table.html( data.sort((a,b)=>b.id-a.id).map(({id, location, beacon})=>{ return ` <tr> <td>${id}</td> <td>${location}</td> <td>${beacon}</td> </tr> ` }).join("") ); } //start app start(); 

 td { text-align: center; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="table"> <thead> <tr> <th>#</th> <th>Location</th> <th>Beacon</th> </tr> </thead> <tbody> </tbody> </table>