<!DOCTYPE html> <html> <head> <title>庄内弁の辞書</title> <meta charset="utf-8"> <style> #myInput { background-image: url('/css/searchicon.png'); /* Add a search icon to input */ background-position: 10px 12px; /* Position the search icon */ background-repeat: no-repeat; /* Do not repeat the icon image */ width: 95.9%; /* Full-width */ font-size: 16px; /* Increase font-size */ padding: 12px 20px 12px 40px; /* Add some padding */ border: 1px solid #ddd; /* Add a grey border */ margin-bottom: 12px; /* Add some space below the input */ } #myTable { border-collapse: collapse; /* Collapse borders */ width: 100%; /* Full-width */ border: 1px solid #ddd; /* Add a grey border */ font-size: 18px; /* Increase font-size */ } #myTable th, #myTable td { text-align: left; /* Left-align text */ padding: 12px; /* Add padding */ } #myTable tr { /* Add a bottom border to all table rows */ border-bottom: 1px solid #ddd; } #myTable tr.header, #myTable tr:hover { /* Add a grey background color to the table header and on hover */ background-color: #f1f1f1; } </style> </head> <body> <h1>庄内弁の辞書</h1> <input type="text" id="myInput" onkeyup="myFunction()" placeholder="辞書検索"> <table id="myTable"> <tr class="header"> <th style="width:25%;">共通語</th> <th style="width:25%;">庄内弁(遊佐方言)</th> <th style="width:25%;">音声</th> <th style="width:25%;">備考</th> </tr> <tr> <td>左利き</td> <td>ちょっけ</td> <td> <audio controls> <source src="./audio/1.wav" type="audio/wav"> </audio> </td> <td></td> </tr> <tr> <td>魚の骨</td> <td>とげ</td> <td> <audio controls> <source src="./audio/1.wav" type="audio/wav"> </audio> </td> <td></td> </tr> <tr> <td>お手玉</td> <td>ざっく</td> <td> <audio controls> <source src="./audio/1.wav" type="audio/wav"> </audio> </td> <td>(物に対してだけ言う)</td> </tr> <tr> <td>赤ちゃん</td> <td>ぼんぼ</td> <td> <audio controls> <source src="./audio/1.wav" type="audio/wav"> </audio> </td> <td></td> </tr> </table> <script> function myFunction() { // Declare variables var input, filter, table, tr, td, i, txtValue; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); table = document.getElementById("myTable"); tr = table.getElementsByTagName("tr"); // Loop through all table rows, and hide those who don't match the search query for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName("td")[0]; if (td) { txtValue = td.textContent || td.innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } td = tr[i].getElementsByTagName("td")[1]; if (td) { txtValue = td.textContent || td.innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } } } } </script> </body> </html>