リンク先の、iframeの表示内容を変えたい。

「search.html」から、選んだ項目によって、表示内容を変えたい。

index.html　　(←リンク先)
contents.html （←iframe）
menu.html (←iframe)
search.html　　（←リンク元）

の4つのファイルを使用。

例：[search.html]内の、t1のリンクを選んだら、classがt1のtrだけを表示。
aaa　| aaa |aaa |aaa |aaa|
aaa2 | aaa2 |aaa2 |aaa2 |aaa2|
aaa3 | aaa3 |aaa3 |aaa3 |aaa3|
aaa４ | aaa４ |aaa４ |aaa４ |aaa４|

こんな感じにt1の項目だけを表示したいです。

以下、それぞれに記述しているコードです。

[index.html]

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width, initial-scale=1">
6<title></title>
7    <style>
8    #header {
9        position: absolute;
10        top: 0;
11        left: 0px;
12        width: 100%;
13        height: 100px;
14        text-align: center;
15    }
16    #contents{
17        position: absolute;
18        top: 100px;
19        right: 0;
20        left: 0;
21        width:100%;
22        height: 100%;
23        border-left: 2px solid #ccc;
24    }
25    iframe {
26        border: none;
27        height: 100%;
28        width: 100%;
29    }
30    </style>
31</head>
32
33<body>
34    <div id="header">
35        <iframe src="menu.html"></iframe>
36    </div>
37    <div id="contents">
38        <iframe src="contents.html" id="f_main"></iframe>
39    </div>
40    <script>
41        var urlParam = location.search.substring(1);
42        // URLにパラメータが存在する場合
43        if(urlParam) {
44            // 「&」が含まれている場合は「&」で分割
45            var param = urlParam.split('&');
46
47            // パラメータを格納する用の配列を用意
48            var paramArray = [];
49
50            // 用意した配列にパラメータを格納
51            for (i = 0; i < param.length; i++) {
52                var paramItem = param[i].split('=');
53                paramArray[paramItem[0]] = paramItem[1];
54            }
55            
56            var ifrm = document.getElementById('f_main');
57            var t1 = ifrm.contentWindow.document.querySelectorAll('#row1');
58            var t2 = ifrm.contentWindow.document.querySelectorAll('#row2');
59            var t3 = ifrm.contentWindow.document.querySelectorAll('#row3');
60
61            var t1_flg=false;
62            var t2_flg=false;
63            var t3_flg=false;
64
65            if (paramArray.class == 't1') {
66                t1_flg=true;
67            } 
68            if (paramArray.class == 't2') {
69                t2_flg=true;
70            } 
71            if(paramArray.class == 't3')  {
72                t3_flg=true;
73            }
74            if(t1_flg == false){
75                for(var i=0; i<t1.length; i++) {
76                    t1[i].style.display = 'none';
77                }
78            }
79            if(t2_flg == false){
80                for(var i=0; i<t2.length; i++) {
81                    t2[i].style.display = 'none';
82                }
83            }
84            if(t3_flg == false){
85                for(var i=0; i<t3.length; i++) {
86                    t3[i].style.display = 'none';
87                }
88            }
89        }
90    </script>
91
92</body>
93</html>

[contents.html]

html
1
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5<meta charset="utf-8">
6<meta name="viewport" content="width=device-width, initial-scale=1">
7<title></title>
8
9</head>
10<body>
11	
12	    <table style="border:1px solid;table-layout: collapse;">
13        <tr><th>Table</th></tr>
14            <tr class="row1">
15            	<td style="border:1px solid black;">aaa</td>
16            	<td style="border:1px solid black;">aaa</td>
17            	<td style="border:1px solid black;">aaa</td>
18            	<td style="border:1px solid black;">aaa</td>
19            	<td style="border:1px solid black;">aaa</td>
20            </tr>
21            <tr class="row1">
22            	<td style="border:1px solid black;">aaa2</td>
23            	<td style="border:1px solid black;">aaa2</td>
24            	<td style="border:1px solid black;">aaa2</td>
25            	<td style="border:1px solid black;">aaa2</td>
26            	<td style="border:1px solid black;">aaa2</td>
27            </tr>
28            <tr class="row1">
29            	<td style="border:1px solid black;">aaa3</td>
30            	<td style="border:1px solid black;">aaa3</td>
31            	<td style="border:1px solid black;">aaa3</td>
32            	<td style="border:1px solid black;">aaa3</td>
33            	<td style="border:1px solid black;">aaa3</td>
34            </tr>
35            <tr class="row2">
36            	<td style="border:1px solid black;">iii</td>
37            	<td style="border:1px solid black;">iii</td>
38            	<td style="border:1px solid black;">iii</td>
39            	<td style="border:1px solid black;">iii</td>
40            	<td style="border:1px solid black;">iii</td>
41            </tr>
42            <tr class="row1">
43            	<td style="border:1px solid black;">aaa４</td>
44            	<td style="border:1px solid black;">aaa４</td>
45            	<td style="border:1px solid black;">aaa４</td>
46            	<td style="border:1px solid black;">aaa４</td>
47            	<td style="border:1px solid black;">aaa４</td>
48            </tr>
49            <tr class="row2">
50            	<td style="border:1px solid black;">iii2</td>
51            	<td style="border:1px solid black;">iii2</td>
52            	<td style="border:1px solid black;">iii2</td>
53            	<td style="border:1px solid black;">iii2</td>
54            	<td style="border:1px solid black;">iii2</td>
55            </tr>
56            <tr id="row3">
57            	<td style="border:1px solid black;">eee</td>
58            	<td style="border:1px solid black;">eee</td>
59            	<td style="border:1px solid black;">eee</td>
60            	<td style="border:1px solid black;">eee</td>
61            	<td style="border:1px solid black;">eee</td>
62            </tr>
63        <table> 
64</body>
65</html>

[menu.html]

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width, initial-scale=1">
6<title></title>
7<style>
8	ul{
9		list-style: none;
10	}
11	li{
12		padding: 10px;
13		display: inline-block;
14		background:skyblue;
15		box-shadow: 2px 2px 2px grey;
16		cursor: pointer;
17		color:black;
18		
19		border-radius: 5px;
20	}
21	li a{
22		text-decoration: none;
23		color:white;
24	}
25	li a:hover{
26		filter: brightness(30%);
27	}
28</style>
29</head>
30<body>
31
32<nav>
33		<ul>
34			<li><a href="#">[ TOP ]</a></li>
35			<li><a href="#">[ MENU ]</a></li>
36			<li><a href="#">[ MENU2 ]</a></li>
37			<li><a href="#">[ MENU3 ]</a></li>
38			<li><a href="#">[ MENU4 ]</a></li>
39			<li><a href="#">[ MENU5 ]</a></li>
40		</ul>
41	</nav>
42</body>
43</html>

[search.html]

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width, initial-scale=1">
6<title></title>
7<body>
8	<ul>
9    	<li><a href="index.html?class=t1">classが“t1”の場合</a></li>
10    	<li><a href="index.html?class=t2">classが“t2”の場合</a></li>
11    	<li><a href="index.html?class=t3">classが“t3”の場合</a></li>
12    	<li><a href="index.html">パラメータなし</a></li>
13    </ul>
14</body>
15</html>