質問編集履歴

4 解決コード追加

S.T

S.T score 78

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

    13317 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。
3 コード追加

S.T

S.T score 78

2015/10/13 11:32  投稿
google マテリアルデザインについて
お世話になります！
Googleのマテリアルデザインを使用して、Web制作を行っています。
一部ハマってしまった箇所があり、この度質問させていただきました！
[http://www.getmdl.io/components/index.html#tables-section](http://www.getmdl.io/components/index.html#tables-section)
上記URLを参考にテーブルを作りました。
システムの仕様上、動的に表示データを書き換えなければならないため、列の要素をjqueryで追加したり削除したりしているのですが、
列を丸ごと削除してしまうと、マテリアルデザインが自動で生成したチェックボックスまでもが消えてしまいます。
この消えてしまったチェックボックスを再生性するのにハマッてしまい、色々試しているのですが、消してしまったチェックボックスを正しい状態で再生成する方法がわからず、この度質問させていただきました。
また、下記URLがヒントだと思っているのですが、いまいちうまくいきません。。。
[http://www.getmdl.io/started/index.html](http://www.getmdl.io/started/index.html)
文章に過不足ありましたらご指摘ください！
下記に問題となっているHTML、JS、PHPのコードを記載します。
恐れ入りますが、よろしくお願いします！
動きとしましては、
1. inputタグでchangeイベント発火
2. inputタグに入力されたIDをajax通信でPOST
3. POSTされたIDをDBから検索し、IDに緋もづいている情報をテンプレートに投げる（3番のソースコードは割合しています。）
4. 出来上がったテンプレート情報をajaxに返す。
以上、よろしくお願いします！
###ソースコード
```HTML
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
   <thead>
   <tr>
      <th class="mdl-data-table__cell--non-numeric">ID</th>
      <th class="mdl-data-table__cell--non-numeric">記事タイトル</th>
      <th class="mdl-data-table__cell--non-numeric">カテゴリ</th>
      <th class="mdl-data-table__cell--non-numeric">登録日</th>
      <th class="mdl-data-table__cell--non-numeric">公開日</th>
      <th class="mdl-data-table__cell--non-numeric">記事を見る</th>
  </tr>
  </thead>
  <tbody>
      @include('admin.column.column_list')
  </tbody>
</table>
```
```PHP
@foreach ($column as $key => $value)
<tr>
  <td class="mdl-data-table__cell--non-numeric " >{!! $column[$key]->id !!}</td>
  <td class="mdl-data-table__cell--non-numeric " >>{!! $column[$key]->title !!}</a></td>
  <td class="mdl-data-table__cell--non-numeric " >{!! $column[$key]->category_name !!}</td>
  <td class="mdl-data-table__cell--non-numeric " >{!! $column[$key]->created_at !!}</td>
  <td class="mdl-data-table__cell--non-numeric " >{!! $column[$key]->release_date !!}</td>
  <td class="mdl-data-table__cell--non-numeric " ><span class="webview"><a href="" target="_blank"><i class="material-icons">web</i>見る</a></span></td>
</tr>
@endforeach
```
```javascript
//検索
$(document).on('change','#findID',function() {
    var id = $("#findID").val();
    $.ajax({
       type : "POST",
       url : "find.php",
       data : {
           "id":id
       },
       scriptCharset : "UTF-8",
       success : function(data){
           $("tbody").children().remove()
           $("tbody").children().append(data);
       },
       error : function(){
           //
       }
   });
});
```
  • jQuery

    13317 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。
2 リンク修正

S.T

S.T score 78

2015/10/06 14:15  投稿
google マテリアルデザインについて
お世話になります！
Googleのマテリアルデザインを使用して、Web制作を行っています。
一部ハマってしまった箇所があり、この度質問させていただきました！
【参考URL】
[リンク内容](http://www.getmdl.io/components/index.html#tables-section)
[http://www.getmdl.io/components/index.html#tables-section](http://www.getmdl.io/components/index.html#tables-section)
上記URLを参考にテーブルを作りました。
システムの仕様上、動的に表示データを書き換えなければならないため、列の要素をjqueryで追加したり削除したりしているのですが、
列を丸ごと削除してしまうと、マテリアルデザインが自動で生成したチェックボックスまでもが消えてしまいます。
この消えてしまったチェックボックスを再生性するのにハマッてしまい、色々試しているのですが、消してしまったチェックボックスを正しい状態で再生成する方法がわからず、この度質問させていただきました。
また、下記URLがヒントだと思っているのですが、いまいちうまくいきません。。。
【URL】
[リンク内容](http://www.getmdl.io/started/index.html)
[http://www.getmdl.io/started/index.html](http://www.getmdl.io/started/index.html)
文章に過不足ありましたらご指摘ください！
恐れ入りますが、よろしくお願いします！
  • jQuery

    13317 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。
1 リンクの設定

S.T

S.T score 78

2015/10/06 14:14  投稿
google マテリアルデザインについて
お世話になります！
Googleのマテリアルデザインを使用して、Web制作を行っています。
一部ハマってしまった箇所があり、この度質問させていただきました！
【参考URL】
http://www.getmdl.io/components/index.html#tables-section
[リンク内容](http://www.getmdl.io/components/index.html#tables-section)
上記URLを参考にテーブルを作りました。
システムの仕様上、動的に表示データを書き換えなければならないため、列の要素をjqueryで追加したり削除したりしているのですが、
列を丸ごと削除してしまうと、マテリアルデザインが自動で生成したチェックボックスまでもが消えてしまいます。
この消えてしまったチェックボックスを再生性するのにハマッてしまい、色々試しているのですが、消してしまったチェックボックスを正しい状態で再生成する方法がわからず、この度質問させていただきました。
また、下記URLがヒントだと思っているのですが、いまいちうまくいきません。。。
【URL】
http://www.getmdl.io/started/index.html
[リンク内容](http://www.getmdl.io/started/index.html)
文章に過不足ありましたらご指摘ください！
恐れ入りますが、よろしくお願いします！
  • jQuery

    13317 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る