Синхронизация объекта с таблицей HTML

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; 
} 

начало даты и конец и т.д., отформатирован в быть ТД.

Как добиться того, чтобы люди могли изменять текст в таблице и обновлять объект?

Answer 1

я, наконец, решил это без рамки. Вот как это делается:

Создайте таблицу, как описано выше. Затем вместо использования contentEditable (который плохо поддерживается) заполните все <TD>, которые вы хотите сделать редактируемыми с помощью <textarea>. Затем дайте атрибуту name textarea значение вашего столбца и присвойте ему идентификатор, соответствующий объекту, который вы использовали для заполнения этой конкретной строки.

Затем, когда обновляется любое текстовое поле, просто обновляйте соответствующий объект.

Answer 2

Вам нужно что-то для «склеивания» данных и просмотра вместе. Вы можете использовать фреймворк, который поддерживает привязку данных, например AngularJS, EmberJS, Knockout или Backbone. Если вы хотите сохранить свои данные, вам необходимо предоставить какой-то бэкэнд для хранения (mysql, sqlite, ...)

Answer 3

Я бы использовал Knockout в качестве самого быстрого решения.

Этот учебник поможет вам начать:

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