jquery UI - テーブルの内容をファイルに保存

Question

jqueryの初心者です...最近jquery UIライブラリが見つかりました。 これまで私が持っているのは、テーブルを含むPHP Webページです。 テーブルの各行には、id、ファイル名、およびファイルの内容の3つの値が表示されます。 jquery UIライブラリのおかげで、私はまた、ユーザーが任意のセルの内容を変更できるようにEDITボタンがあります。今私は何とか自動的にテーブルのセルだけでなく、元のファイルに変更を自動的に保存したいと思います。

ここにStackOverflowにいくつかの他の記事をもとに、私が使用する必要があると思う。$私のために、保存を行うために、別のPHPページを呼び出すために取得します。しかし、私はどのようにテーブルから正しいデータを渡すか分からない。私は、列2であるファイル名、およびファイルの内容である列3を渡したいと思いますが、どうやってそれをやるのか分かりません。

ここで私はこれまでのところ（WWWからのサンプルに基づいて）

$(document).ready(function() { 
    TABLE.formwork('#configs'); 
}); 

var TABLE = {}; 

TABLE.formwork = function(table) { 
    var $tables = $(table); 

    $tables.each(function() { 
     var _table = $(this); 
     _table.find('thead tr').append($('<th class="edit">&nbsp;</th>')); 
     _table.find('tbody tr').append($('<td class="edit"><input type="button"   value="Edit"/></td>')) 
    }); 

    $tables.find('.edit :button').live('click', function(e) { 
     TABLE.editable(this); 
     e.preventDefault(); 
    }); 
} 

TABLE.editable = function(button) { 
    var $button = $(button); 
    var $row = $button.parents('tbody tr'); 
    var $cells = $row.children('td').not('.edit'); 

    if ($row.data('flag')) { // in edit mode, move back to table 
     // cell methods 
     $cells.each(function() { 
      var _cell = $(this); 
      _cell.html(_cell.find('input').val()); 
     }) 

     $row.data('flag', false); 
     $button.val('Edit'); 
     // i think this is where i need to do something like $.get("savefile.php", {filename: '', datatosave: ''}); 
    } 
    else { // in table mode, move to edit mode 
     // cell methods 
     $cells.each(function() { 
      var _cell = $(this); 
      _cell.data('text', _cell.html()).html(''); 

      var $input = $('<input type="text" />').val(_cell.data('text')).width(_cell.width() - 16); 

      _cell.append($input); 
     }) 

     $row.data('flag', true); 
     $button.val('Save'); 
    } 
}​ 

任意の助けをいただければ幸い持ってjQueryのコードです。

Answer 1

データとユーザーインターフェイスの分離を検討してください。インターフェイス（あなたのテーブル）は、アプリケーションの変数に格納されているデータの表現でなければなりません。テーブルの値を変更すると、そのデータを含む変数を更新する必要があります。保存すると、、のHTMLテーブルではなく、のデータが保存されます。

あなたのテーブルは、あなたのデータから移入する必要のあるコンテナです。それを介して

[ 
    { id: "1" , file: "something.txt" , content: "Hello", row: "1", col: "1" }, 
    { id: "2" , file: "happyfile.txt" , content: "I am so happy", row: "1", col: "2" } 
] 

ます。次に取るこのJSONデータ、ループやフィルインあなたのテーブル：JSONは良いよあなたのデータを表現し、保存するために使用した構造です。あなたがテーブルに関連付けられたJSON値を更新する更新

。 JSONをHTMLではなくサーバーに保存します。