#やりたいこと
jQueryで、テーブルの行を追加、削除するというフォームを作成しています。
このフォームをリロードしたとき、
このフォームをsubmitしたとき
テーブルの状態(行数、値)を維持したいのですが、どのようにしたらよいでしょうか?
PHPでsubmitしたとき、DBに入力内容を保存しています。
submitしたとき、PHPでDBに入力内容を保存しますが、
バリデーションエラーがあった場合に現在のコードだと
テーブル行の追加削除を行っている部分が初期状態に戻ってしまいます。
どのようにid="t_detail"のテーブル行、テーブルの値の状態を維持すればよいのでしょうか?
HTML
1<table> 2<tr> 3 <!-- 他のフォーム内の項目の行 --> 4</tr> 5<tr class="type_detail"> 6 <th>テーブル</th> 7 <td colspan="5"> 8 <table class="table-form" id="t_detail"> 9 <thead> 10 <tr> 11 <td> 12 <button name="plus" id="plus" type="button"><img src="img/icon_plus.png"></button> 13 </td> 14 <td>日付</td> 15 <td>数量</td> 16 <td>チェック</td> 17 </tr> 18 </thead> 19 <tbody> 20 <tr style="display:none;"> 21 <td> 22 <button name="minus" class="minus" type="button"><img src="img/icon_minus.png"></button> 23 </td> 24 <td> 25 <input style="width:20%;" type="text" name="t_date[]" data-order-status /> 26 </td> 27 <td> 28 <input style="width:50%;" type="text" name="amount[]" /> 29 </td> 30 <td> 31 <input type="checkbox" name="t_check[]"> 32 </td> 33 </tr> 34 </tbody> 35 </table> 36 </td> 37</tr> 38</table> 39<input type="submit" value="submit">
JS
1jQuery(function($) { 2 $("#plus").on("click", function() { 3 $("#t_detail tbody tr:first-child").clone(true).appendTo("#t_detail tbody"); 4 $("#t_detail tbody tr:last-child").css("display", "table-row"); 5 $(".minus").on("click", function() { 6 $(this).parent().parent().remove(); 7 }); 8 }); 9});