テーブル行の背景色を変更する方法

HTMLとCSSを使用した方法:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
}
td {
  padding: 8px;
}
.highlight {
  background-color: yellow;
}
</style>
</head>
<body>
<table>
    <tr>
        <td>行1</td>
        <td>データ1</td>
    </tr>
    <tr>
        <td class="highlight">行2</td>
        <td class="highlight">データ2</td>
    </tr>
    <tr>
        <td>行3</td>
        <td>データ3</td>
    </tr>
</table>
</body>
</html>

JavaScriptを使用した方法:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
}
td {
  padding: 8px;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
    const table = document.querySelector('table');
    const rows = table.getElementsByTagName('tr');
    for (let i = 0; i < rows.length; i++) {
        rows[i].addEventListener('click', function() {
            this.style.backgroundColor = 'yellow';
        });
    }
});
</script>
</head>
<body>
<table>
    <tr>
        <td>行1</td>
        <td>データ1</td>
    </tr>
    <tr>
        <td>行2</td>
        <td>データ2</td>
    </tr>
    <tr>
        <td>行3</td>
        <td>データ3</td>
    </tr>
</table>
</body>
</html>

これらの例では、最初の行以外の特定の行の背景色を変更しています。HTMLとCSSの例では、行のクラスに「highlight」という名前を付け、CSSでそのクラスに対して背景色を指定しています。JavaScriptの例では、行がクリックされたときに背景色を変更するイベントリスナーを追加しています。

これらの方法を使用することで、テーブルの行の背景色を簡単に変更することができます。それぞれの方法を試して、自分の要件に最適なものを選択してください。