HTMLを使って、ドロップダウンリスト（選択リスト）で選んだ項目に基づいて、別の表のセルにハイライトをつけるプログラムを作成することは、少しのコードとJavaScriptで簡単に実現できます。この記事では、初心者向けにこの機能を作成する方法をわかりやすく解説します。
1. ドロップダウンリストと表の連動とは？
ドロップダウンリストを使うことで、ユーザーは選択肢から項目を選べます。その選択肢に応じて、別の場所のデータが変化したり、強調表示される仕組みが「連動」です。たとえば、Aという項目を選ぶと、表の中にあるAに関連するデータが赤くハイライトされるようにできます。
これを実現するために、HTMLだけでなく、少しのJavaScript（JS）が必要です。JSを使って、選択肢の変化に応じてHTML要素の色を変えたり、表示を更新したりします。
2. HTMLでドロップダウンリストを作成する
まずは、基本的なドロップダウンリストをHTMLで作成します。以下のコードは、簡単なドロップダウンリストを作成する例です。
<label for="mySelect">選択してください:</label>
<select id="mySelect">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>上記のコードでは、ユーザーが「A」「B」「C」から選択できるリストが作成されます。このリストが選択されたときに、表と連動させて色を変える仕組みを作成します。
3. 表の作成と連動するためのJavaScript
次に、選択した項目に基づいて表の中のデータをハイライトするために、JavaScriptを使って動的にスタイルを変更します。以下のコード例では、ドロップダウンリストの選択肢に基づいて、表の中の該当するセルを赤くハイライトします。
<table border="1">
<tr>
<td id="cellA">A</td>
<td id="cellB">B</td>
<td id="cellC">C</td>
</tr>
</table>
<script>
document.getElementById('mySelect').addEventListener('change', function() {
var selectedValue = this.value;
var cells = ['cellA', 'cellB', 'cellC'];
cells.forEach(function(cell) {
document.getElementById(cell).style.backgroundColor = '';
});
if (selectedValue) {
document.getElementById('cell' + selectedValue).style.backgroundColor = 'red';
}
});
</script>このコードでは、ドロップダウンリストで選択された値に基づいて、対応する表のセルを赤くハイライトします。`change`イベントを使って、ユーザーが選択肢を変更したときにセルの色を動的に変更する仕組みです。
4. 実際に試してみる：動作確認とカスタマイズ
実際にこのコードを自分のHTMLファイルに追加して、ブラウザで動作を確認してみましょう。選択肢を変更するたびに、該当するセルが赤くハイライトされるのが確認できるはずです。
さらに、この仕組みをカスタマイズすることで、複雑な連動や、もっと多様なデザインを作ることも可能です。例えば、セルをクリックしたときに選択が反映されるようにすることもできます。
5. まとめと次のステップ
ドロップダウンリストと表の連動は、JavaScriptを使って簡単に実現できます。今回紹介した方法をベースに、自分のプロジェクトに合わせたカスタマイズを行うことができます。
もしこれからさらに学習を進めていくのであれば、HTMLやJavaScriptの基本的なチュートリアルを学び、さらに複雑なインタラクションを実現してみましょう。
コメント