JavaScript、表示非表示の切り替えの挙動がうまくいきません。

PHP+Smarty3（JavaScriptを含んだHTMLテンプレート）の環境で、以下、ブラウザで表示させた際のソースです。（最終的に吐き出されてるHTML）

HTML
1
2<!DOCTYPE html>
3<html lang="ja">
4	<head>
5		<meta charset="utf-8">
6		<title>*********</title>
7		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
8		<meta name="robots" content="noindex,nofollow">
9		<meta http-equiv="Pragma" content="no-cache">
10		<meta http-equiv="Cache-Control" content="no-store">
11		<meta http-equiv="Expires" content="0">
12		<link rel="stylesheet" type="text/css" href="templates/products.css">
13			<script>
14
15function show_data_table(k){
16			if (k == '1') {
17			document.getElementById('data_1').style.display='block';
18		}else{
19			document.getElementById('data_1').style.display='none';
20		}
21			if (k == '2') {
22			document.getElementById('data_2').style.display='block';
23		}else{
24			document.getElementById('data_2').style.display='none';
25		}
26			if (k == '3') {
27			document.getElementById('data_3').style.display='block';
28		}else{
29			document.getElementById('data_3').style.display='none';
30		}
31	
32}
33
34</script>
35	</head>
36	<body>
37
38	<h2>*********</h2>
39	<button id="back" onClick="location.href='index.php'"> <<= 戻る</button>
40	<h3>製品リスト</h3>
41	
42	<!---ライン切換え部--->
43	<div id="line_panel">
44					<button class="line_btn" type="button" onClick="show_data_table(1)">A001</button>
45					<button class="line_btn" type="button" onClick="show_data_table(2)">A002</button>
46					<button class="line_btn" type="button" onClick="show_data_table(3)">A003</button>
47		
48	</div>
49
50<!---データ表示部--->
51	<div id="data_1">
52		<div>A001の製品データ<div>
53			<table class="product_list">
54				<tr>
55					<th>id</th>
56					<th>品目コード</th>
57					<th>機種名</th>
58					<th>1ショット生産数</th>
59					<th>登録日</th>
60				</tr>
61									<tr>
62						<td>1</td>
63						<td>A002</td>
64						<td>456</td>
65						<td>1</td>
66						<td>2022年01月08日</td>
67					</tr>
68			</table>
69	</div>
70	<div id="data_2">
71		<div>A002の製品データ<div>
72			<table class="product_list">
73				<tr>
74					<th>id</th>
75					<th>品目コード</th>
76					<th>機種名</th>
77					<th>1ショット生産数</th>
78					<th>登録日</th>
79				</tr>
80									<tr>
81						<td>2</td>
82						<td>A007</td>
83						<td>654</td>
84						<td>1</td>
85						<td>2022年01月07日</td>
86					</tr>
87			</table>
88	</div>
89	<div id="data_3">
90		<div>A003の製品データ<div>
91			<table class="product_list">
92				<tr>
93					<th>id</th>
94					<th>品目コード</th>
95					<th>機種名</th>
96					<th>1ショット生産数</th>
97					<th>登録日</th>
98				</tr>
99									<tr>
100						<td></td>
101						<td></td>
102						<td></td>
103						<td></td>
104						<td></td>
105					</tr>
106			</table>
107	</div>
108
109
110
111
112
113  </body>
114</html>
115

当初アクセス時はdata_1（A001）～data_3（A003）が全部表示されていて、A001のline_btnをクリックするとA001のデータを残して他が消えます（正常動作）
しかし、A002、A003のボタンをクリックするとの全部が非表示になってしまいます。
どうしてこうなるのかがわかりません。。。（フロントエンド苦手・・・・）

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちわ。

div タグが正しく閉じられていない所が3箇所あって、

そこを治すとうまく動いている感じです。

以下にコードを示します。

html
1
2<!DOCTYPE html>
3<html lang="ja">
4    <head>
5        <meta charset="utf-8">
6        <title>*********</title>
7        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
8        <meta name="robots" content="noindex,nofollow">
9        <meta http-equiv="Pragma" content="no-cache">
10        <meta http-equiv="Cache-Control" content="no-store">
11        <meta http-equiv="Expires" content="0">
12        <link rel="stylesheet" type="text/css" href="templates/products.css">
13            <script>
14
15function show_data_table(k){
16            if (k == '1') {
17            document.getElementById('data_1').style.display='block';
18        }else{
19            document.getElementById('data_1').style.display='none';
20        }
21            if (k == '2') {
22            document.getElementById('data_2').style.display='block';
23        }else{
24            document.getElementById('data_2').style.display='none';
25        }
26            if (k == '3') {
27            document.getElementById('data_3').style.display='block';
28        }else{
29            document.getElementById('data_3').style.display='none';
30        }
31
32}
33
34</script>
35    </head>
36    <body>
37
38    <h2>*********</h2>
39    <button id="back" onClick="location.href='index.php'"> <<= 戻る</button>
40    <h3>製品リスト</h3>
41
42    <!---ライン切換え部--->
43    <div id="line_panel">
44                    <button class="line_btn" type="button" onClick="show_data_table(1)">A001</button>
45                    <button class="line_btn" type="button" onClick="show_data_table(2)">A002</button>
46                    <button class="line_btn" type="button" onClick="show_data_table(3)">A003</button>
47
48    </div>
49
50<!---データ表示部--->
51    <div id="data_1">
52        <div>A001の製品データ</div> <!-- 閉じタグになっていなかった -->
53            <table class="product_list">
54                <tr>
55                    <th>id</th>
56                    <th>品目コード</th>
57                    <th>機種名</th>
58                    <th>1ショット生産数</th>
59                    <th>登録日</th>
60                </tr>
61                                    <tr>
62                        <td>1</td>
63                        <td>A002</td>
64                        <td>456</td>
65                        <td>1</td>
66                        <td>2022年01月08日</td>
67                    </tr>
68            </table>
69    </div>
70    <div id="data_2">
71        <div>A002の製品データ</div>　<!-- 閉じタグになっていなかった -->
72            <table class="product_list">
73                <tr>
74                    <th>id</th>
75                    <th>品目コード</th>
76                    <th>機種名</th>
77                    <th>1ショット生産数</th>
78                    <th>登録日</th>
79                </tr>
80                                    <tr>
81                        <td>2</td>
82                        <td>A007</td>
83                        <td>654</td>
84                        <td>1</td>
85                        <td>2022年01月07日</td>
86                    </tr>
87            </table>
88    </div>
89    <div id="data_3">
90        <div>A003の製品データ</div>    <!-- 閉じタグになっていなかった -->
91            <table class="product_list">
92                <tr>
93                    <th>id</th>
94                    <th>品目コード</th>
95                    <th>機種名</th>
96                    <th>1ショット生産数</th>
97                    <th>登録日</th>
98                </tr>
99                                    <tr>
100                        <td></td>
101                        <td></td>
102                        <td></td>
103                        <td></td>
104                        <td></td>
105                    </tr>
106            </table>
107    </div>
108  </body>
109</html>