Knockout.js 删除可编辑表问题

我一直在使用knockoutjs和jquery编写一个简单的表编辑器，用于编辑简单的时间线。我的对象模型如下所示：

var timelineEditor = function(data) {
    var self = this;
    self.rowCount = data.Cells.length;
    self.rows = ko.observableArray([]);
    self.name = ko.observable(data.Name);
    self.filename = ko.observable(data.FileName);
    self.keyIdentifier = ko.observable(data.identifier);
    for (var i = 0; i < data.Cells.length; i++) {
        self.rows.push(new timelineEditorRow(data.Cells[i], self));
    }
};

var timelineEditorRow = function(dataRow, parent) {
    var self = this;
    var $parent = parent;
    self.cells = ko.observableArray([]);
    for (var i = 0; i < dataRow.length; i++) {
        self.cells.push(new timelineEditorCell(dataRow[i], self));
    }
};

var timelineEditorCell = function(dataCell, parent) {
    var self = this;
    var $parent = parent;
    self.text = ko.observable(dataCell.Text);
    self.isItemEditing = ko.observable(false);
    self.editItem = function() {
        self.isItemEditing(true);
    };
    self.finishEdit = function() {
        self.isItemEditing(false);
    }
};

我是这样装订的：

<div id="EditorDiv">
    <table data-bind="foreach: rows">
        <tr data-bind="foreach: cells">
            <td>
                <span data-bind ="text: text, visible: !isItemEditing(), click: editItem, blur: finishEdit"></span>
                <textarea  data-bind="text: text, visible: isItemEditing"></textarea>
            </td>
        </tr>
    </table>
</div>

现在，当我点击任何一个单元格时，小编辑器就会出现，并且基本上可以正常工作。但是，我的问题是，如何保持显示范围和编辑文本区域的大小相同？显然，我可以设置width和height属性，但是因为它们包含在表中，所以高度需要由父行设置，宽度需要由当前不在层次结构中的表列设置

---

关于如何重新组织对象模型以使其可行，有什么建议吗？

如果在span和textarea上使用基于%-的宽度/高度，我看不出问题出在哪里？您不需要设置行高吗？什么是表列？据我所知，只有tr&td，而“column”只是各种tr中的td:nth子项。用户可以添加列，这就是我最初不想这样做的原因。也就是说，我或许可以用它做点什么。表列就是这样。它们其实并不存在。它们的宽度是从它们里面物品的宽度衍生出来的。啊哈！在我看来，您似乎不知道表布局属性。过来看。如果将其设置为“固定”，则可以通过设置td的样式轻松为列指定固定/相对宽度。如果预设宽度不是您想要的，您仍然可以在使用一些JS更改textarea内容时动态调整它们。不，我不知道。这有…可能性。酷，希望这能解决问题。我看你的淘汰码没有问题。。顺便说一句，具有固定布局的表还具有更快的浏览器渲染的额外好处。祝你好运