Обновите ячейку таблицы HTML данными MySQL, а не добавляйте новые ячейки

Question

Есть две вещи, с которыми я пытаюсь добиться обеих проблем:

Во-первых, когда моя функция выполняется с интервалом, она добавляет новые ячейки в таблицу, а не обновляет то, что уже может быть в данный момент..

2-й, макет таблицы, который я пытаюсь создать в виде 10 столбцов на 12 строк вниз, где ячейки ограничены этими измерениями, вместо того, чтобы отображать все 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

Избегайте поиска определенных элементов 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>

Answer 2

Для первого совета:

1. определить идентификатор для строки при создании строк

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

Итак, теперь вы можете добавлять или заменять в зависимости, если есть, функцию обновления;

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

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