質問編集履歴

3

タイトル変更

2018/03/29 13:54

投稿

jojo003
jojo003

スコア14

test CHANGED
@@ -1 +1 @@
1
- テーブル行をセレクトボックスでフィルターしたい。
1
+ Javascript:テーブル行をセレクトボックスでフィルターしたい。
test CHANGED
File without changes

2

コード編集

2018/03/29 13:54

投稿

jojo003
jojo003

スコア14

test CHANGED
File without changes
test CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  しかしJavascriptのエラーが出てしまい、何か選択すると全行消えてしまいます。
6
6
 
7
- console.logで変数の中身など調べたところ「table.rows[i].cells[1].firstChild.innerText」でうまく値を取得できていませんでした。
7
+ console.logで変数の中身など調べたところ「table.rows[i].cells[5].firstChild.innerText」でうまく値を取得できていませんでした。
8
8
 
9
9
  色々試してみたのですが解決策が見いだせません。
10
10
 
@@ -144,7 +144,7 @@
144
144
 
145
145
  for( i = 1; i < table.rows.length; i++ ){
146
146
 
147
- if( selectedType === '' || selectedType === table.rows[i].cells[1].firstChild.innerText ){
147
+ if( selectedType === '' || selectedType === table.rows[i].cells[5].firstChild.innerText ){
148
148
 
149
149
  table.rows[i].style.display = '';
150
150
 

1

HTMLの修正

2018/03/29 13:40

投稿

jojo003
jojo003

スコア14

test CHANGED
File without changes
test CHANGED
@@ -15,6 +15,24 @@
15
15
  ```
16
16
 
17
17
  ▼View▼
18
+
19
+ <div>
20
+
21
+ <select id="types" onChange="searchTable();" >
22
+
23
+ <option value=""></option>
24
+
25
+ <option value="" selected="">選択してください</option>
26
+
27
+  {% for p in paginationModal %}
28
+
29
+ <option value="{{ p.name }}" >{{ p.name }}</option>
30
+
31
+  {% endfor %}
32
+
33
+ </select>
34
+
35
+ </div>
18
36
 
19
37
  <table id="result">
20
38
 
@@ -42,65 +60,65 @@
42
60
 
43
61
  {% for p in paginationModal %}
44
62
 
45
- <tr id="selectedMaker">
63
+ <tr>
46
64
 
47
- <td aria-label="ID">
65
+ <td>
48
66
 
49
- <div class="table_tdInner">
67
+ <div>
50
68
 
51
- {{ p.id }}
69
+ {{ p.id }}
52
70
 
53
- </div>
71
+ </div>
72
+
73
+ </td>
74
+
75
+     <td>
76
+
77
+ <div>
78
+
79
+ {{ p.name }}
80
+
81
+ </div>
54
82
 
55
83
  </td>
56
84
 
57
- <td aria-label="名称">
85
+ <td>
58
86
 
59
- <div class="table_tdInner">
87
+ <div>
60
88
 
61
- {{ p.name }}
89
+ {{ p.partNumber }}
62
90
 
63
- </div>
91
+ </div>
64
92
 
65
93
  </td>
66
94
 
67
- <td aria-label="品番">
95
+ <td>
68
96
 
69
- <div class="table_tdInner">
97
+ <div>
70
98
 
71
- {{ p.partNumber }}
99
+ {{ p.modelNumber }}
72
100
 
73
- </div>
101
+ </div>
74
102
 
75
103
  </td>
76
104
 
77
- <td aria-label="型番">
105
+ <td>
78
106
 
79
- <div class="table_tdInner">
107
+ <div>
80
108
 
81
- {{ p.modelNumber }}
109
+ {{ p.jan }}
82
110
 
83
- </div>
111
+ </div>
84
112
 
85
113
  </td>
86
114
 
87
- <td aria-label="JAN">
115
+ <td>
88
116
 
89
- <div class="table_tdInner">
117
+ <div>
90
118
 
91
- {{ p.jan }}
119
+ {{ p.maker }}
92
120
 
93
- </div>
121
+ </div>
94
-
95
- </td>
96
-
97
- <td aria-label="メーカー">
98
-
99
- <div class="table_tdInner">
100
-
101
- {{ p.maker ? p.maker.name : '' }}
102
-
103
- </div>
104
122
 
105
123
  </td>
106
124