【JavaScript】テーブルの各行にあるボタンを押すとそのほかのボタンが非活性になるコード #CSS

テーブルのDOM操作極めてますか？

よくあるのがテーブルの各行にボタンがあった時の操作です。
その時にDOMについて知らないと積みます。

テーブルの中のボタンを取得しそのボタンを配列として処理、各ボタンにクリックイベントをバインディング

以下のソースコードをコピペすると各行にボタンが配置された表を表示します。
ボタンを押すとテーブルにあるそのほかのボタンが非活性になります。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table with Edit Buttons</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <table id="myTable">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th>Column 4</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
                <td><button class="edit-btn">Edit</button></td>
            </tr>
            <tr>
                <td>Data 5</td>
                <td>Data 6</td>
                <td>Data 7</td>
                <td>Data 8</td>
                <td><button class="edit-btn">Edit</button></td>
            </tr>
            <tr>
                <td>Data 9</td>
                <td>Data 10</td>
                <td>Data 11</td>
                <td>Data 12</td>
                <td><button class="edit-btn">Edit</button></td>
            </tr>
            <tr>
                <td>Data 13</td>
                <td>Data 14</td>
                <td>Data 15</td>
                <td>Data 16</td>
                <td><button class="edit-btn">Edit</button></td>
            </tr>
        </tbody>
    </table>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const table = document.getElementById('myTable');
            const editButtons = table.getElementsByClassName('edit-btn');

            Array.from(editButtons).forEach(button => {
                button.addEventListener('click', function() {
                    // Disable all edit buttons
                    Array.from(editButtons).forEach(btn => {
                        btn.disabled = true;
                    });

                    // Enable only the clicked button
                    this.disabled = false;

                    // You can add your edit functionality here
                    console.log('Edit button clicked for row:', this.closest('tr').rowIndex);
                });
            });
        });
    </script>
</body>
</html>

1番上のボタンをクリックすると(どこでもいいですが)

そのほかの行にあるボタンが非活性になります。

Q.これはいったい何に役立つんですか？

それはこの記事を読んだあなたの想像力にお任せします。