teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問google マテリアルデザインについて

編集履歴

質問編集履歴

4

解決コード追加

2015/10/14 02:02

投稿

S.T
S.T

スコア93

test CHANGED
File without changes
test CHANGED
@@ -167,3 +167,105 @@
167
167
 
168
168
 
169
169
  ```
170
+
171
+
172
+
173
+
174
+
175
+
176
+
177
+ ###解決後ソースコード
178
+
179
+ ```javascript
180
+
181
+ function someFunction() {
182
+
183
+
184
+
185
+ var table = document.createElement('table');
186
+
187
+ table.className = 'mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp';
188
+
189
+
190
+
191
+ var thead = document.createElement('thead');
192
+
193
+ table.appendChild(thead);
194
+
195
+
196
+
197
+ var tr = document.createElement('tr');
198
+
199
+ table.appendChild(tr);
200
+
201
+
202
+
203
+ var th = document.createElement('th');
204
+
205
+ th.className = 'mdl-data-table__cell--non-numeric';
206
+
207
+ th.textContent = 'ID';
208
+
209
+ table.lastChild.appendChild(th);
210
+
211
+
212
+
213
+ var tbody = document.createElement('tbody');
214
+
215
+ table.appendChild(tbody);
216
+
217
+
218
+
219
+ return table;
220
+
221
+ };
222
+
223
+
224
+
225
+
226
+
227
+ $(document).on('change','#findID',function() {
228
+
229
+ var id = $("#findID").val();
230
+
231
+ $.ajax({
232
+
233
+ type : "POST",
234
+
235
+ url : "find.php",
236
+
237
+ data : {
238
+
239
+ "id":id
240
+
241
+ },
242
+
243
+ scriptCharset : "UTF-8",
244
+
245
+ success : function(data){
246
+
247
+ var table = someFunction();
248
+
249
+ table.lastChild.innerHTML = column
250
+
251
+ componentHandler.upgradeElement(table);
252
+
253
+ $("table").remove()
254
+
255
+ $("form").append(table);
256
+
257
+
258
+
259
+ },
260
+
261
+ error : function(){
262
+
263
+ //
264
+
265
+ }
266
+
267
+ });
268
+
269
+ });
270
+
271
+ ```

3

コード追加

2015/10/14 02:02

投稿

S.T
S.T

スコア93

test CHANGED
File without changes
test CHANGED
@@ -32,8 +32,138 @@
32
32
 
33
33
 
34
34
 
35
- 文章に過不足ありましたらご指摘ください！
35
+ 下記に問題となっているHTML、JS、PHPのコードを記載します。
36
36
 
37
37
 
38
38
 
39
+ 動きとしましては、
40
+
41
+ 1. inputタグでchangeイベント発火
42
+
43
+ 2. inputタグに入力されたIDをajax通信でPOST
44
+
45
+ 3. POSTされたIDをDBから検索し、IDに緋もづいている情報をテンプレートに投げる（3番のソースコードは割合しています。）
46
+
47
+ 4. 出来上がったテンプレート情報をajaxに返す。
48
+
49
+
50
+
39
- 恐れ入りますが、よろしくお願いします！
51
+ 以上、よろしくお願いします！
52
+
53
+
54
+
55
+
56
+
57
+ ###ソースコード
58
+
59
+ ```HTML
60
+
61
+ <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
62
+
63
+ <thead>
64
+
65
+ <tr>
66
+
67
+ <th class="mdl-data-table__cell--non-numeric">ID</th>
68
+
69
+ <th class="mdl-data-table__cell--non-numeric">記事タイトル</th>
70
+
71
+ <th class="mdl-data-table__cell--non-numeric">カテゴリ</th>
72
+
73
+ <th class="mdl-data-table__cell--non-numeric">登録日</th>
74
+
75
+ <th class="mdl-data-table__cell--non-numeric">公開日</th>
76
+
77
+ <th class="mdl-data-table__cell--non-numeric">記事を見る</th>
78
+
79
+ </tr>
80
+
81
+ </thead>
82
+
83
+ <tbody>
84
+
85
+ @include('admin.column.column_list')
86
+
87
+ </tbody>
88
+
89
+ </table>
90
+
91
+ ```
92
+
93
+
94
+
95
+ ```PHP
96
+
97
+ @foreach ($column as $key => $value)
98
+
99
+ <tr>
100
+
101
+ <td class="mdl-data-table__cell--non-numeric " >{!! $column[$key]->id !!}</td>
102
+
103
+ <td class="mdl-data-table__cell--non-numeric " >>{!! $column[$key]->title !!}</a></td>
104
+
105
+ <td class="mdl-data-table__cell--non-numeric " >{!! $column[$key]->category_name !!}</td>
106
+
107
+ <td class="mdl-data-table__cell--non-numeric " >{!! $column[$key]->created_at !!}</td>
108
+
109
+ <td class="mdl-data-table__cell--non-numeric " >{!! $column[$key]->release_date !!}</td>
110
+
111
+ <td class="mdl-data-table__cell--non-numeric " ><span class="webview"><a href="" target="_blank"><i class="material-icons">web</i>見る</a></span></td>
112
+
113
+ </tr>
114
+
115
+ @endforeach
116
+
117
+ ```
118
+
119
+
120
+
121
+
122
+
123
+ ```javascript
124
+
125
+ //検索
126
+
127
+ $(document).on('change','#findID',function() {
128
+
129
+ var id = $("#findID").val();
130
+
131
+ $.ajax({
132
+
133
+ type : "POST",
134
+
135
+ url : "find.php",
136
+
137
+ data : {
138
+
139
+ "id":id
140
+
141
+ },
142
+
143
+ scriptCharset : "UTF-8",
144
+
145
+ success : function(data){
146
+
147
+ $("tbody").children().remove()
148
+
149
+ $("tbody").children().append(data);
150
+
151
+ },
152
+
153
+ error : function(){
154
+
155
+ //
156
+
157
+ }
158
+
159
+ });
160
+
161
+ });
162
+
163
+
164
+
165
+
166
+
167
+
168
+
169
+ ```

2

リンク修正

2015/10/13 02:32

投稿

S.T
S.T

スコア93

test CHANGED
File without changes
test CHANGED
@@ -10,9 +10,7 @@
10
10
 
11
11
 
12
12
 
13
- 【参考URL】
14
-
15
- [リンク内容](http://www.getmdl.io/components/index.html#tables-section)
13
+ [http://www.getmdl.io/components/index.html#tables-section](http://www.getmdl.io/components/index.html#tables-section)
16
14
 
17
15
 
18
16
 
@@ -28,9 +26,9 @@
28
26
 
29
27
  また、下記URLがヒントだと思っているのですが、いまいちうまくいきません。。。
30
28
 
31
- 【URL】
32
29
 
30
+
33
- [リンク内容](http://www.getmdl.io/started/index.html)
31
+ [http://www.getmdl.io/started/index.html](http://www.getmdl.io/started/index.html)
34
32
 
35
33
 
36
34
 

1

リンクの設定

2015/10/06 05:15

投稿

S.T
S.T

スコア93

test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  【参考URL】
14
14
 
15
- http://www.getmdl.io/components/index.html#tables-section
15
+ [リンク内容](http://www.getmdl.io/components/index.html#tables-section)
16
16
 
17
17
 
18
18
 
@@ -30,7 +30,7 @@
30
30
 
31
31
  【URL】
32
32
 
33
- http://www.getmdl.io/started/index.html
33
+ [リンク内容](http://www.getmdl.io/started/index.html)
34
34
 
35
35
 
36
36