お世話になります!
Googleのマテリアルデザインを使用して、Web制作を行っています。
一部ハマってしまった箇所があり、この度質問させていただきました!
http://www.getmdl.io/components/index.html#tables-section
上記URLを参考にテーブルを作りました。
システムの仕様上、動的に表示データを書き換えなければならないため、列の要素をjqueryで追加したり削除したりしているのですが、
列を丸ごと削除してしまうと、マテリアルデザインが自動で生成したチェックボックスまでもが消えてしまいます。
この消えてしまったチェックボックスを再生性するのにハマッてしまい、色々試しているのですが、消してしまったチェックボックスを正しい状態で再生成する方法がわからず、この度質問させていただきました。
また、下記URLがヒントだと思っているのですが、いまいちうまくいきません。。。
http://www.getmdl.io/started/index.html
下記に問題となっているHTML、JS、PHPのコードを記載します。
動きとしましては、
- inputタグでchangeイベント発火
- inputタグに入力されたIDをajax通信でPOST
- POSTされたIDをDBから検索し、IDに緋もづいている情報をテンプレートに投げる(3番のソースコードは割合しています。)
- 出来上がったテンプレート情報をajaxに返す。
以上、よろしくお願いします!
###ソースコード
HTML
1<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp"> 2 <thead> 3 <tr> 4 <th class="mdl-data-table__cell--non-numeric">ID</th> 5 <th class="mdl-data-table__cell--non-numeric">記事タイトル</th> 6 <th class="mdl-data-table__cell--non-numeric">カテゴリ</th> 7 <th class="mdl-data-table__cell--non-numeric">登録日</th> 8 <th class="mdl-data-table__cell--non-numeric">公開日</th> 9 <th class="mdl-data-table__cell--non-numeric">記事を見る</th> 10 </tr> 11 </thead> 12 <tbody> 13 @include('admin.column.column_list') 14 </tbody> 15</table>
PHP
1@foreach ($column as $key => $value) 2<tr> 3 <td class="mdl-data-table__cell--non-numeric " >{!! $column[$key]->id !!}</td> 4 <td class="mdl-data-table__cell--non-numeric " >>{!! $column[$key]->title !!}</a></td> 5 <td class="mdl-data-table__cell--non-numeric " >{!! $column[$key]->category_name !!}</td> 6 <td class="mdl-data-table__cell--non-numeric " >{!! $column[$key]->created_at !!}</td> 7 <td class="mdl-data-table__cell--non-numeric " >{!! $column[$key]->release_date !!}</td> 8 <td class="mdl-data-table__cell--non-numeric " ><span class="webview"><a href="" target="_blank"><i class="material-icons">web</i>見る</a></span></td> 9</tr> 10@endforeach
javascript
1//検索 2$(document).on('change','#findID',function() { 3 var id = $("#findID").val(); 4 $.ajax({ 5 type : "POST", 6 url : "find.php", 7 data : { 8 "id":id 9 }, 10 scriptCharset : "UTF-8", 11 success : function(data){ 12 $("tbody").children().remove() 13 $("tbody").children().append(data); 14 }, 15 error : function(){ 16 // 17 } 18 }); 19}); 20 21 22
###解決後ソースコード
javascript
1function someFunction() { 2 3 var table = document.createElement('table'); 4 table.className = 'mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp'; 5 6 var thead = document.createElement('thead'); 7 table.appendChild(thead); 8 9 var tr = document.createElement('tr'); 10 table.appendChild(tr); 11 12 var th = document.createElement('th'); 13 th.className = 'mdl-data-table__cell--non-numeric'; 14 th.textContent = 'ID'; 15 table.lastChild.appendChild(th); 16 17 var tbody = document.createElement('tbody'); 18 table.appendChild(tbody); 19 20 return table; 21}; 22 23 24$(document).on('change','#findID',function() { 25 var id = $("#findID").val(); 26 $.ajax({ 27 type : "POST", 28 url : "find.php", 29 data : { 30 "id":id 31 }, 32 scriptCharset : "UTF-8", 33 success : function(data){ 34 var table = someFunction(); 35 table.lastChild.innerHTML = column 36 componentHandler.upgradeElement(table); 37 $("table").remove() 38 $("form").append(table); 39 40 }, 41 error : function(){ 42 // 43 } 44 }); 45});
回答2件
あなたの回答
tips
プレビュー