Question

我有一个带桌子的网站。我正在从对象中将数据加载到表中。表格的单元格已启用contenteditable。

我正在使用Bootstrap和jQuery，仅此而已。

表

        <table>
          <thead>
          <tr>
            <th class="date">Date</th>
            <th class="start">Start</th>
            <th class="end">End</th>
            <th class="title">Title</th>
            <th class="rem">Remarks</th>
          </tr>
          </thead>
          <tbody id="tableBody">

          </tbody>
        </table>

填写表格的代码：

$("#tableBody").append("<tr>" + date + start + end + descr + rem "<td contenteditable='true'></td></tr>");

这是我正在尝试同步的对象：

function Shift(start, end, descr) {
    this.start = start;
    this.end = end;
    this.descr = descr;
}

日期开始和结束等预先格式化为TD。

我如何实现人们可以更改表格中的文本并让它更新对象？

Answer 1

我终于在没有框架的情况下解决了这个问题方法如下：

如上所述创建表格。然后，不是使用contentEditable（支持得很差），而是填充每个<TD>，您希望使用<textarea>进行编辑。然后给textarea的name属性赋予列的值，并为其指定与用于填充该特定行的对象相对应的id。

然后当更新任何textarea时，只需更新相应的对象。

Answer 2

您需要一些东西来“粘合”数据并一起查看。您可以使用支持数据绑定的框架，如AngularJS，EmberJS，Knockout或Backbone。如果你想保留你的数据，你必须提供某种存储后端（mysql，sqlite，...）

Answer 3

我会使用Knockout作为最快的解决方案。

本教程可以帮助您入门：

http://knockoutjs.com/examples/gridEditor.html
http://knockoutjs.com/examples/helloWorld.html

将对象与HTML表同步

3 个答案: