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

回答編集履歴

1

追記

2017/07/18 08:31

投稿

s8_chu
s8_chu

スコア14731

answer CHANGED
@@ -95,4 +95,105 @@
95
95
  </script>
96
96
  </body>
97
97
  </html>
98
+ ```
99
+
100
+ 追記
101
+ ---
102
+ 上記のコードのうち2箇所を修正しました。
103
+ ```HTML
104
+ <!DOCTYPE html>
105
+ <html lang="ja">
106
+ <head>
107
+ <meta charset="UTF-8">
108
+ <title>タイトル</title>
109
+ <style type="text/css">
110
+ .test th {
111
+ border: 1px solid #FFF;
112
+ padding: 7px;
113
+ background: #000;
114
+ color: #FFF;
115
+ text-align: center;
116
+ vertical-align: middle;
117
+ }
118
+
119
+ .test {
120
+ width: 100%;
121
+ border-collapse: collapse;
122
+ padding: 0;
123
+ }
124
+
125
+ .test td {
126
+ border: 1px solid black;
127
+ padding: 10px;
128
+ vertical-align: middle;
129
+ }
130
+
131
+ .test td {
132
+ border-top: none !important;
133
+ border-right: 1px solid #000;
134
+ }
135
+
136
+ .waku {
137
+ position: relative;
138
+ }
139
+
140
+ .waku a::after {
141
+ position: absolute;
142
+ width: 100%;
143
+ height: 100%;
144
+ content: "";
145
+ top: 0;
146
+ left: 0;
147
+ right: 0;
148
+ bottom: 0;
149
+ }
150
+
151
+ .th1 {
152
+ padding: 10px;
153
+ display: table-cell;
154
+ }
155
+ </style>
156
+ </head>
157
+ <body>
158
+ <label>
159
+ <input type="checkbox" id="checkbox1" checked>
160
+ Bを非表示(これをクリックしてBの列が全て消えるようにしたいです。)
161
+ </label>
162
+
163
+ <table class="test" id="table1">
164
+ <tbody>
165
+ <tr>
166
+ <th>A</th>
167
+ <th colspan="2" id="addr1" class="th1 group1">B</th>
168
+ <th>C</th>
169
+ </tr>
170
+ <tr>
171
+ <td rowspan="2" class="waku">ぽぽぽ</td>
172
+ <td class="group1">ねこ</td>
173
+ <td class="group1">いぬ</td>
174
+ <td>ヤモリ</td>
175
+ </tr>
176
+ <tr>
177
+ <td class="group1">おうち</td>
178
+ <td class="group1">おにわ</td>
179
+ <td>おそと</td>
180
+ </tr>
181
+ </tbody>
182
+ </table>
183
+ <script>
184
+ document.getElementById("checkbox1").addEventListener("change", function () {
185
+ var elements = document.querySelectorAll(".group1");
186
+ if (!this.checked) {
187
+ for (var i = 0; i < elements.length; i++) {
188
+ elements[i].style.display = "none";
189
+ }
190
+ } else {
191
+ for (var j = 0; j < elements.length; j++) {
192
+ elements[j].style.display = "table-cell";
193
+ }
194
+ }
195
+ }, false);
196
+ </script>
197
+ </body>
198
+ </html>
98
199
  ```