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

回答編集履歴

4

修正

2019/05/11 11:03

投稿

退会済みユーザー
answer CHANGED
@@ -62,7 +62,7 @@
62
62
  //のちにこの子要素に含まれる output 要素を取得しやすいようにするため
63
63
  tr = first.querySelector ('tr');
64
64
 
65
- //最初の tbody 要素があれば削除する(一度しか行われないのであれば不要)
65
+ //最初の tbody 要素以外があれば削除する(一度しか行われないのであれば不要)
66
66
  other.forEach (e => e.remove ());//tbdoy 削除
67
67
 
68
68
  //配列(JSONデータ)から行部分を作る

3

解説になるかな?

2019/05/11 11:03

投稿

退会済みユーザー
answer CHANGED
@@ -40,4 +40,50 @@
40
40
  });
41
41
  }
42
42
 
43
- ```
43
+ ```
44
+ まずは謝らないと。css が抜けていた。
45
+ 表の tbody は複数置ける。最初の tbody は、雛形にするので隠しておく
46
+ ```css
47
+ #sample tbody:first-of-type { display: none; }
48
+ ```
49
+
50
+ あとは解説。
51
+ ```Javascript
52
+ let
53
+ //基準となるテーブル,そのテーブルの子要素である tbody を取得する
54
+ //tbody は、複数ある可能性があり、なおかつ最初の tbody は雛形にするので
55
+ //区別して取得する
56
+ [table, first, ...other] = document.querySelectorAll ('#sample, #sample tbody'),
57
+
58
+ //新たに追加する tbody を作っておく
59
+ newTbody = table.appendChild (document.createElement ('tbody')),
60
+
61
+ //雛形となる tbody の最初の tr 要素を取得する。(tr 自身も雛形にする)
62
+ //のちにこの子要素に含まれる output 要素を取得しやすいようにするため
63
+ tr = first.querySelector ('tr');
64
+
65
+ //最初の tbody 要素があれば削除する(一度しか行われないのであれば不要)
66
+ other.forEach (e => e.remove ());//tbdoy 削除
67
+
68
+ //配列(JSONデータ)から行部分を作る
69
+ ary.forEach (row => { //row は1行分のデータ
70
+ let
71
+ //雛形の tr 要素のクローンを作って(子要素もすべて含む)新たに作った tbody に追加する
72
+ tr_ = newTbody.appendChild (tr.cloneNode (true)),
73
+
74
+ //雛形(tr)にある要素(a, output)を取り出す
75
+ //別々に取得するのが面倒なので一度に取得する。
76
+ //(順番は a要素が最初というのが保証されていそうだから)
77
+ [a, ...output] = tr_.querySelectorAll ('a, output');
78
+
79
+ //output 要素の名前と同じ row オブジェクトから値を取り出し output 要素の値とする
80
+ // 最後の || '' は、 row[e.name] がゼロまたは、null の時には空文字にする
81
+ Array.from (output, e => e.value = row[e.name] || '');
82
+ //outoput は配列なのだから以下でもよかった。コード文字数がちょっと減る
83
+ //output.forEach (e => e.value = row[e.name] || '');
84
+
85
+ //アンカー要素は特別なので、href 属性に値を代入する
86
+ a.href=row.id + '.php';
87
+ });
88
+ ```
89
+ おわかりいただけただろうか。

2

修正

2019/05/11 11:01

投稿

退会済みユーザー
answer CHANGED
@@ -8,8 +8,7 @@
8
8
 
9
9
  <tbody>
10
10
  <tr>
11
- <td><a href=""><output name="id"></outpur></a>
11
+ <td><a href=""><output name="name"></output></a>
12
- <td><output name="name"></output>
13
12
  <td><output name="grade"></output>
14
13
  <td><output name="age"></output>
15
14
  <td><output name="height"></output>

1

HTML忘れてた

2019/05/05 11:16

投稿

退会済みユーザー
answer CHANGED
@@ -1,6 +1,21 @@
1
1
  試してないけれど?
2
2
  後は、select で表示範囲を指定するだけ?
3
-
3
+ ```HTML
4
+ <table id="sample" class="table table-bordered table-hover table-responsive table-sm">
5
+ <thead>
6
+ <tr class="table-primary">
7
+ <th>氏名 <th>学年 <th>年齢 <th>身長
8
+
9
+ <tbody>
10
+ <tr>
11
+ <td><a href=""><output name="id"></outpur></a>
12
+ <td><output name="name"></output>
13
+ <td><output name="grade"></output>
14
+ <td><output name="age"></output>
15
+ <td><output name="height"></output>
16
+ </tbody>
17
+ </table>
18
+ ```
4
19
  ```javascript
5
20
  function hoge () {
6
21
  fetch ('http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json')