Javascript 在引导模式下使用HandsonTable不会'；行不通

我正试图利用，这样我就可以在我的网站上有类似Excel的单元格。但是，我将它与一个模式一起使用，作为创建一个新活动的一部分，用于概述，但这并不像预期的那样有效

首先，直到关闭并重新打开模式，单元才会正确渲染。当我试图在关闭模式后销毁单元，以便将其重新添加为空白时，它不会删除旧单元，而只是在下面添加一组新单元

我推断这是因为模态最初是隐藏的，所以库无法正确渲染单元。因为我试着把它放在一个空白的网站上，在那里它工作得很好。所以我尝试在模态准备好后添加单元格，但仍然无法正常工作

function CreateHandsonTable() {
    $('#new-activity-modal').on('shown.bs.modal', function (e) {
        var data = [['Column A', 'Column B', 'Column C'], ['1', '2', '3']];
        var container = document.getElementById("example");
        hot = new Handsontable(container, {
            data: data
        });
    });
    $('#new-activity-modal').on('hidden.bs.modal', function (e) {
        hot.destroy();
    });
}

我使用上面的方法来创建单元格，这就是我得到的：

你可以看到，这张照片的长度远远超出了它在三个细胞中应该容纳的范围。现在，如果我使模态失去焦点或关闭它，我会得到以下结果：

再往下一点，我会看到：

很明显，这与我想使用带有初始隐藏元素的单元格这一事实有关，并且可能由于我甚至无法删除之前的单元格集而错误地使用了插件

感谢您的帮助：）

---

我打了一个电话来帮忙。

玩小提琴将隐藏改为隐藏似乎可以解决复制问题：

function CreateHandsonTable() {
    $('#new-activity-modal').on('shown.bs.modal', function (e) {
        var data = [['Column A', 'Column B', 'Column C'], ['1', '2', '3']];
        var container = document.getElementById("example");
        hot = new Handsontable(container, {
            data: data
        });
    });
    $('#new-activity-modal').on('hide.bs.modal', function (e) {
        hot.destroy();
    });
}