Javascript 制表器：如何重新加载多个表？

我在这里浏览了制表器主题，但没有发现任何与我试图实现的内容类似的内容。也就是说，我的项目从一个大数组生成多个制表器表。我正在尝试实现一个手动添加新表的功能，但有一个问题：如何用新添加的表重新加载所有表。问题是，它似乎在不删除以前加载的表的情况下生成了额外的表。也许我在删除之前的所有表时遗漏了一行

（问题如下图所示，您可以看到“空”表，而只有包含内容的表应该被追加）

是一个可以玩的密码笔。您可以通过在输入字段（两侧）中输入gibberish并单击“adddictionary”来复制该问题。我的代码基本上循环了tabledata数组中的所有嵌套数组，并为每个数组创建一个单独的表

谢谢大家的关注和思考

以下是表格生成循环：

const drawTables = () => {

for (let dictionary = 0; dictionary < tabledata.length; dictionary++) {

  let table = new Tabulator(("#dictionary-" + dictionary), {
    data: tabledata[dictionary],
    layout: "fitColumns",
    reactiveData: true,
    // headerSort: false,
    layoutColumnsOnNewData: true,

    columns: [ //define the table columns
      {
        title: "domain",
        field: "domain",
        editor: "input",
        validator: "unique"
      },
      {
        title: "range",
        field: "range",
        editor: "input",
        validator: "unique"
      }
    ],
  });
}

}

const drawTables=（）=>{
for（让dictionary=0；dictionary

下面是创建一个新表并将其注入大tabledata数组的尝试

//event listener for form entry
let addDictionaryForm = document.querySelector("#add-dictionary-form")
addDictionaryForm.addEventListener("submit", function (e) {
  e.preventDefault();
  addDictionary();
})


const addDictionary = () => {
  let newDictionary = []
  let domainInput = document.querySelectorAll(".domainInput");
  let rangeInput = document.querySelectorAll(".rangeInput");
  let rangeIdx = 0;

  //looping through form entries and adding them to the newDictionary array only if both fields are filled out
  for (let i = 0; i < domainInput.length; i++) {
    if (domainInput[i].value && rangeInput[rangeIdx].value) {
      newDictionary.push({
        domain: domainInput[i].value,
        range: rangeInput[rangeIdx].value
      });
    }
    rangeIdx++;

  }

//add form entries to the general dictionary array
  tabledata.unshift(newDictionary)

// refresh table?
drawTables();
tabledata.setData();

}

//表单条目的事件侦听器
让addDictionaryForm=document.querySelector（“添加字典表单”）
addDictionaryForm.addEventListener（“提交”，函数（e）{
e、 预防默认值（）；
addDictionary（）；
})
const addDictionary=（）=>{
让newDictionary=[]
让domainInput=document.querySelectorAll（“.domainInput”）；
让rangeInput=document.querySelectorAll（“.rangeInput”）；
设rangeIdx=0；
//仅当两个字段都已填写时，才循环遍历表单条目并将其添加到newDictionary数组
for（设i=0；i

我建议您在所有函数之外定义一个表数组，我们称之为表。然后在

drawTables

函数中，只需将新表推送到该数组上：

 var table = new Tabulator //... insert rest of table definition

 tables.push(table); //push table to array of tables.

然后，当需要重画所有表时，只需迭代数组并对每个表调用重画函数：

tables.forEach(function(table){
    table.redraw();
});