使用mysql数据更新HTML表单元，而不是添加新单元

Question

我想通过两件事来解决这两个问题。

第一个是我的函数按间隔运行时，它将新单元格添加到表中，而不是更新当前可能已经存在的单元格。

第二，我要创建的表格布局是向下12行向下的10列，其中这些单元格受到这些度量的限制，而不是一次显示所有120个单元格（我尚未创建CSS或脚本在浏览互联网之后，我找不到这方面的参考。）

http://localhost:8080/aliasFrequencyDict/show?_method=PUT&version=&frequency=0&unit=Q&description=abc123&lang=PL

Answer 1

第一个提示：

1. 在创建行时为行定义ID

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

1. 因此，现在您可以根据更新功能添加或替换（如果存在）；

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>