teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

4

解決コード追加

2015/10/14 02:02

投稿

S.T
S.T

スコア93

title CHANGED
File without changes
body CHANGED
@@ -82,4 +82,55 @@
82
82
 
83
83
 
84
84
 
85
+ ```
86
+
87
+
88
+
89
+ ###解決後ソースコード
90
+ ```javascript
91
+ function someFunction() {
92
+
93
+ var table = document.createElement('table');
94
+ table.className = 'mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp';
95
+
96
+ var thead = document.createElement('thead');
97
+ table.appendChild(thead);
98
+
99
+ var tr = document.createElement('tr');
100
+ table.appendChild(tr);
101
+
102
+ var th = document.createElement('th');
103
+ th.className = 'mdl-data-table__cell--non-numeric';
104
+ th.textContent = 'ID';
105
+ table.lastChild.appendChild(th);
106
+
107
+ var tbody = document.createElement('tbody');
108
+ table.appendChild(tbody);
109
+
110
+ return table;
111
+ };
112
+
113
+
114
+ $(document).on('change','#findID',function() {
115
+ var id = $("#findID").val();
116
+ $.ajax({
117
+ type : "POST",
118
+ url : "find.php",
119
+ data : {
120
+ "id":id
121
+ },
122
+ scriptCharset : "UTF-8",
123
+ success : function(data){
124
+ var table = someFunction();
125
+ table.lastChild.innerHTML = column
126
+ componentHandler.upgradeElement(table);
127
+ $("table").remove()
128
+ $("form").append(table);
129
+
130
+ },
131
+ error : function(){
132
+ //
133
+ }
134
+ });
135
+ });
85
136
  ```

3

コード追加

2015/10/14 02:02

投稿

S.T
S.T

スコア93

title CHANGED
File without changes
body CHANGED
@@ -15,6 +15,71 @@
15
15
 
16
16
  [http://www.getmdl.io/started/index.html](http://www.getmdl.io/started/index.html)
17
17
 
18
- 文章過不足ありましたらご指摘くださ
18
+ 下記問題となってるHTML、JS、PHPのコードを記載します。
19
19
 
20
+ 動きとしましては、
21
+ 1. inputタグでchangeイベント発火
22
+ 2. inputタグに入力されたIDをajax通信でPOST
23
+ 3. POSTされたIDをDBから検索し、IDに緋もづいている情報をテンプレートに投げる(3番のソースコードは割合しています。)
24
+ 4. 出来上がったテンプレート情報をajaxに返す。
25
+
20
- 恐れ入りますが、よろしくお願いします!
26
+ 以上、よろしくお願いします!
27
+
28
+
29
+ ###ソースコード
30
+ ```HTML
31
+ <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
32
+ <thead>
33
+ <tr>
34
+ <th class="mdl-data-table__cell--non-numeric">ID</th>
35
+ <th class="mdl-data-table__cell--non-numeric">記事タイトル</th>
36
+ <th class="mdl-data-table__cell--non-numeric">カテゴリ</th>
37
+ <th class="mdl-data-table__cell--non-numeric">登録日</th>
38
+ <th class="mdl-data-table__cell--non-numeric">公開日</th>
39
+ <th class="mdl-data-table__cell--non-numeric">記事を見る</th>
40
+ </tr>
41
+ </thead>
42
+ <tbody>
43
+ @include('admin.column.column_list')
44
+ </tbody>
45
+ </table>
46
+ ```
47
+
48
+ ```PHP
49
+ @foreach ($column as $key => $value)
50
+ <tr>
51
+ <td class="mdl-data-table__cell--non-numeric " >{!! $column[$key]->id !!}</td>
52
+ <td class="mdl-data-table__cell--non-numeric " >>{!! $column[$key]->title !!}</a></td>
53
+ <td class="mdl-data-table__cell--non-numeric " >{!! $column[$key]->category_name !!}</td>
54
+ <td class="mdl-data-table__cell--non-numeric " >{!! $column[$key]->created_at !!}</td>
55
+ <td class="mdl-data-table__cell--non-numeric " >{!! $column[$key]->release_date !!}</td>
56
+ <td class="mdl-data-table__cell--non-numeric " ><span class="webview"><a href="" target="_blank"><i class="material-icons">web</i>見る</a></span></td>
57
+ </tr>
58
+ @endforeach
59
+ ```
60
+
61
+
62
+ ```javascript
63
+ //検索
64
+ $(document).on('change','#findID',function() {
65
+ var id = $("#findID").val();
66
+ $.ajax({
67
+ type : "POST",
68
+ url : "find.php",
69
+ data : {
70
+ "id":id
71
+ },
72
+ scriptCharset : "UTF-8",
73
+ success : function(data){
74
+ $("tbody").children().remove()
75
+ $("tbody").children().append(data);
76
+ },
77
+ error : function(){
78
+ //
79
+ }
80
+ });
81
+ });
82
+
83
+
84
+
85
+ ```

2

リンク修正

2015/10/13 02:32

投稿

S.T
S.T

スコア93

title CHANGED
File without changes
body CHANGED
@@ -4,8 +4,7 @@
4
4
 
5
5
  一部ハマってしまった箇所があり、この度質問させていただきました!
6
6
 
7
- 【参考URL】
8
- [リンク内容](http://www.getmdl.io/components/index.html#tables-section)
7
+ [http://www.getmdl.io/components/index.html#tables-section](http://www.getmdl.io/components/index.html#tables-section)
9
8
 
10
9
  上記URLを参考にテーブルを作りました。
11
10
  システムの仕様上、動的に表示データを書き換えなければならないため、列の要素をjqueryで追加したり削除したりしているのですが、
@@ -13,9 +12,9 @@
13
12
  この消えてしまったチェックボックスを再生性するのにハマッてしまい、色々試しているのですが、消してしまったチェックボックスを正しい状態で再生成する方法がわからず、この度質問させていただきました。
14
13
 
15
14
  また、下記URLがヒントだと思っているのですが、いまいちうまくいきません。。。
16
- 【URL】
17
- [リンク内容](http://www.getmdl.io/started/index.html)
18
15
 
16
+ [http://www.getmdl.io/started/index.html](http://www.getmdl.io/started/index.html)
17
+
19
18
  文章に過不足ありましたらご指摘ください!
20
19
 
21
20
  恐れ入りますが、よろしくお願いします!

1

リンクの設定

2015/10/06 05:15

投稿

S.T
S.T

スコア93

title CHANGED
File without changes
body CHANGED
@@ -5,7 +5,7 @@
5
5
  一部ハマってしまった箇所があり、この度質問させていただきました!
6
6
 
7
7
  【参考URL】
8
- http://www.getmdl.io/components/index.html#tables-section
8
+ [リンク内容](http://www.getmdl.io/components/index.html#tables-section)
9
9
 
10
10
  上記URLを参考にテーブルを作りました。
11
11
  システムの仕様上、動的に表示データを書き換えなければならないため、列の要素をjqueryで追加したり削除したりしているのですが、
@@ -14,7 +14,7 @@
14
14
 
15
15
  また、下記URLがヒントだと思っているのですが、いまいちうまくいきません。。。
16
16
  【URL】
17
- http://www.getmdl.io/started/index.html
17
+ [リンク内容](http://www.getmdl.io/started/index.html)
18
18
 
19
19
  文章に過不足ありましたらご指摘ください!
20
20