Javascript 如何引用已创建的handson表来修改它？

我正在制作一个屏幕，其中包含

1到n

hansontables，根据数据库中的其他实体进行动态添加。每个表都有保存、x（删除行）和+（添加行）按钮

我成功地创建了各种表，如手持设备示例中的表，其中包含全局变量，如：

var hot;

$(document).ready(function () {

  var container = document.getElementById('basic_example');
  hot = new Handsontable(container, config);
}

var container = document.getElementById('example1');
  
HotRegisterer.register('myhot', container, {
    data: getCarData(),
    colHeaders: true
});

HotRegisterer.getInstance('myhot').getSourceDataAtCol(0);

然后在其他方法中，我可以更改表格，如：

function addRow() {
    hot.alter("insert_row");
}   

但是，只要我的表的数量不是固定的，我就需要创建表，然后引用对象并修改它们

但是所有的handsontable文档（）都是基于创建一个带有

hot=newhandsontable（container，config）的表和引用此变量后，即
hot.getData（）

因此，我的问题是引用已创建的
handson
表的正确方法是什么？？

我试过几种方法：


使用
JQuery
like

 $('idOfTheTable') 

或


创建
DOM
函数
$$
如下：

var $$ = function(id) {
    return document.getElementById(id);
};

$$(idOfTheTable);


最后一次尝试：

var $container = $("#" + tableName);
var handsontable = $container.data('handsontable');
handsontable.alter('insert_row');


简短回答，与一位朋友交谈时，他给了我解决问题的线索。我使用了与保留谷歌标记和参考工具提示相同的技术。将引用保留到
数组中


自己的长篇大论
事实上，我无法通过JQuery进行引用，即使遵循了Handsontable文档的定义。但只要引用在某个时刻存在，我就可以将该引用保存在声明为全局变量的数组中

tables = [];

每次调用创建表的方法时，我都会将表引用推入数组以使其保持活动状态

var hot = new Handsontable(container, options);
tables.push(hot);

这样做，我怎么知道我必须调用哪个表？简单地说，HTML代码也是由
动态创建的，我只是创建了一个计数器，它在每次迭代中递增。我只是创建了一个表witch
id=“table_{counter}”
，并用

var tablePosition = parseInt(tableName.split("_")[1]);


热门团队长答案
首先：非常感谢您快速、出色、快速的支持

该键用于更好地跟踪您的实例，您可以选择使用一个对象将其记录下来，以便轻松管理可手持的实例

找到演示

重要部分，定义一个跟踪已创建表的
HotRegisterer
：

var HotRegisterer = {
    bucket: {},
    register: function(key, container, options) {
        var hot = new Handsontable(container, options);
        
        if (typeof key === 'string') {
            this.bucket[key] = hot;    
        } else if (typeof key === 'object') {
            key['__hot'] = hot;
        }
    },
    getInstance: function(key) {
        var hot;
        
        if (typeof key === 'string') {
            hot = this.bucket[key];    
        } else if (typeof key === 'object') {
            hot = key['__hot'];
        }
        
        return hot;
    }
};

然后，使用此对象创建如下表：

var hot;

$(document).ready(function () {

  var container = document.getElementById('basic_example');
  hot = new Handsontable(container, config);
}

var container = document.getElementById('example1');
  
HotRegisterer.register('myhot', container, {
    data: getCarData(),
    colHeaders: true
});

HotRegisterer.getInstance('myhot').getSourceDataAtCol(0);

您可以更改表格，如：

var hot;

$(document).ready(function () {

  var container = document.getElementById('basic_example');
  hot = new Handsontable(container, config);
}

var container = document.getElementById('example1');
  
HotRegisterer.register('myhot', container, {
    data: getCarData(),
    colHeaders: true
});

HotRegisterer.getInstance('myhot').getSourceDataAtCol(0);

远比我的解决方案优雅干净。
您可以提供类似的解决方案，最低代码如下：

//References to handsontable objects on Tab. Key=TabId, Value=Reference to Variable
var tabHandsOnTable = {};

要在选项卡（变量liTabId是当前选项卡ID）中的容器内的HandContable中显示数据，请执行以下代码：

    //Displaying Cuboid in HandsonTable
  var container = document.getElementById(divCuboidWB);
  var hot = new Handsontable(container, {
    data: lidata.liarray,
    colHeaders : liHdr.liHdrArray,
    renderAllRows: true,
    rowHeaders: true,
    minSpareRows: 1,
  });
  //Saving reference of handsontable in global objects. key=liTabId
  tabHandsOnTable[liTabId] = hot;

现在，您可以使用当前选项卡的选项卡idactiveTabId从tabHandsOnTable{}访问handsontable。此外，使用setDateAtCell函数更新切换表的单元格，如下所示：

//Render handsontable cell
function renderCell(rowid, colid, string_value, formula_string, cell_access)
{
  tabHandsOnTable[activeTabId].setDataAtCell(rowid, colid, string_value);
}

这是一个工作示例，我可以在同一个浏览器窗口中显示多个表。
是的，
HotRegisterer
解决方案很棒。另外，如果你想继续使用你的，我建议使用地图而不是数组。这样你就可以使用ID来跟踪它们。如何在angularjs项目中使用它？我找不到任何（完整的）演示。ThorstenC与HandsOnTable团队取得联系后，他们给了我一个超级快速、专业和清晰的答案。您好，
HotRegisterer.getInstance（'myhot'）
正在为我提供实例，我还可以访问它的属性。但是
search
属性不可访问。谁能告诉我原因吗？