Question

我正在创建一个数据表，其中html表中的每个单元格都可以是输入控件，或者像select这样的另一个html控件（现在我需要让输入控件正常工作）。像这样：

<Table>
      <thead>
        <tr>
            <th>Column1</th>
            <th>Column2</th>
         </tr>
    </thead>
    <tbody>
         <tr>                
             <td><input type="text" value=80 /></td>
             <td><input type="text" value=100 /></td>
         </tr>         
        <tr>                
             <td><input type="text" value=120 /></td>
             <td><input type="text" value=140 /></td>
         </tr>  
        <tr>                
             <td><input type="text" value=160 /></td>
             <td><input type="text" value=180 /></td>
         </tr>
    </tbody>
</Table>

我目前发现的只是使用简单的数据绑定创建数据表，因此每个单元格都是一个只读单元格。

在this jsfiddle中，您可以通过某种方式看到我的期望。

更新：我需要的是创建一个表，其中列数和行数将取决于数据源（在本例中为viewmodel中的属性）。

Answer 1

您引用的小提琴的问题是列表中项目的属性是不可观察的。我使用knockout mapping插件为我做这个。

Here is an updated fiddle，它表示在上表中编辑值时下表中的值会发生变化。

这是代码，但请记住引用淘汰映射插件。

* 更新的答案......见评论，UPDATED JSFIDDLE *

HTML

Generated table using ko    
<table border="1">
    <thead>
        <tr data-bind='foreach: datacolumns'>
            <th>
                <span data-bind="text: ColumnName"></span>
            </th>      
        </tr>
    </thead>
    <tbody data-bind="foreach: dataModel">
        <tr  data-bind='foreach: $root.datacolumns'>
            <td>
                <input type="text" data-bind="value:$parent['Value' + ColumnName]"/>
            </td>
        </tr>
    </tbody>
</table>
<br/>
And this table updates when you tab out of the textboxes
<table border="1">
    <thead>
        <tr data-bind='foreach: datacolumns'>
            <th>
                <span data-bind="text: ColumnName"></span>
            </th>      
        </tr>
    </thead>
    <tbody data-bind="foreach: dataModel">
        <tr  data-bind='foreach: $root.datacolumns'>
            <td data-bind="text:$parent['Value' + ColumnName]"></td>
        </tr>
    </tbody>
</table>

的Javascript

function ViewModel(model,columns) {
    var self = this;          

    self.dataModel = ko.mapping.fromJS(model);  
    self.datacolumns = columns;    
}    
var columns =  [{ColumnName:'Column1'},{ColumnName:'Column2'}];

var model =  [
    { ValueColumn1: '80', ValueColumn2: '100' },
    { ValueColumn1: '120', ValueColumn2: '140' },
    { ValueColumn1: '160', ValueColumn2: '180' }
] ;

ko.applyBindings(new ViewModel(model,columns));

如何从viewmodel创建Html表

1 个答案: