表格更新时复制表格嵌套表

Question

我一直在尝试创建一个嵌套表并成功使用下面的代码 1。 我正在尝试创建一个动态 IOT 表，并且每次有新数据来自设备时我都会更新该表，为此我使用了下面的代码 2。 但是每当我尝试更新时，更新都会成功，但嵌套表正在自我复制，所以我该如何阻止这种情况发生。

================ CODE 1 ==================================
rowFormatter:function(row){

   var holderEl = document.createElement("div");
   var tableEl = document.createElement("div");

   const id = row.getData().id;

   holderEl.style.boxSizing = "border-box";
   holderEl.style.padding = "10px 10px 10px 10px";
   holderEl.style.borderTop = "1px solid #d1ddea";
   holderEl.style.borderBotom = "1px solid #d1ddea";
   holderEl.style.background = "#fff";
   holderEl.setAttribute('class', "subTable" + id + "");

   tableEl.style.border = "2px solid #d1ddea";
   tableEl.setAttribute('class', "subTable" + id + "");

   holderEl.appendChild(tableEl);

   row.getElement().appendChild(holderEl);



   var myRowData = row.getData().customFields;

   var subTable = new Tabulator(tableEl, {
       layout:"fitColumns",
       data:myRowData,
       columns:[
       {title:"Name", field:"n",headerSort:true },
       {title:"Value", field:"v"},
       ]
     })    
}, 
============= CODE 2 ===========================
tableAllUnits.updateData([{id:unit.id, speedformatted:data.speed}]);

Answer 1

发生这种情况是因为在行更新时第二次调用行格式化程序时，它不会首先删除旧的嵌套表。

当您创建 holder 元素时，您应该为其分配一个类：

holderEl.classList.add("nested-table")

然后在将元素添加到行之前检查任何预先存在的表并删除它们：

var el = row.getElement();
var nested = el.getElementsByClassName("nested-table");

for(let child of nested){
    child.parentNode.removeChild(child);
}