[Javascript] TableのIDの番号を振り直す

2024年6月9日2024年6月9日 Bluebear-IO 93 Views 0 Comments

tableにそれぞれ順番に0から複数の番号が振られている、ADDボタンを押すと１行目に新しい列が入るようになっているが、それに呼応してIDの番号をきれいに並び替えるコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Table ID Renumbering</title>
</head>
<body>
    <table id="0">三島です</table>
    <table id="1">スズキです</table>
    <table id="2">田中です</table>
    <button id="add">Add Table</button>

    <script>
        // ボタンがクリックされたときの処理
        document.getElementById('add').addEventListener('click', function() {
            // 新しいテーブル要素を作成
            var newTable = document.createElement('table');
            var randomId = Math.floor(Math.random() * 1000); // ランダムなIDを生成
            newTable.id = randomId;
            
            // テーブルの内容を追加
            newTable.innerHTML = '<tr><td>新しいテーブル</td></tr>';
            
            // 最初のテーブルの後に新しいテーブルを挿入
            var firstTable = document.getElementById('0');
            firstTable.parentNode.insertBefore(newTable, firstTable.nextSibling);

            // IDの振り直し
            renumberTableIds();
        });

        // テーブルIDを0から順に振り直す関数
        function renumberTableIds() {
            var tables = document.getElementsByTagName('table');
            for (var i = 0; i < tables.length; i++) {
                tables[i].id = i.toString();
            }
        }
    </script>
</body>
</html>