jqueryテーブルのフォームフィールドを再入力

Question

私は2行で始まる単純なhtmlテーブルを持っています。各行には2つのフォームフィールドがあります。ユーザーは次のようにテーブルに行を追加できます。

$('a#addRow').click(function() { 
    $('#jTable tr:last').after('<tr>'+ 
     '<td><input type="text" name="foo[]" value="" id="foo[]" /></td>'+ 
     '<td><input type="text" name="bar[]" value="" id="bar[]" /></td></tr>'); 
    return false; 
}); 

これは問題なく動作します。

ただし、フォームの投稿後にエラーが検出された場合は、正しい行数の表を再作成する必要があります。現時点では、転記後、テーブルはデフォルトで2つの開始行のみに戻ります。

Answer 1

私はこのサーバー側を行うことにしました。

コントローラー：

$data['rows'] = count($_POST('foo')); 

ビュー

<?php for ($i = 0; $i < $rows; $i++): ?> 
    <tr> 
     <td><input type="text" name="foo[]" value=<?php echo $foo[$i]; ?> id="foo[]" /></td> 
     <td><input type="text" name="bar[]" value=<?php echo $bar[$i]; ?> id="bar[]" /></td> 
    </tr>  
<?php endfor; ?> 

Answer 2

標準のhtml-postからAJAXリクエストへのデータのポスティングを試みてください。これは、フォームが投稿されたときにサイトが再ロードされないようにします。 - >あなたのテーブルはそのまま残されます。 JQuery Submit

Answer 3

フォームを送信すると、テーブルに行数を格納できます。

$('form').submit(function(){ 
    // Cool stuff here 
    // ... 
    localStorage.setItem('nbLinesinTable', $('table > tr').length); 
    // or add input to form 
} 

k_waveソリューションも信頼性があります。