スニぺったん | 無料のコードスニペット・データベース

メニュー

ホーム

検索

言語

行列をtableタグに変換する関数 (matrixToTable)

総合評価: - 作成日: 2025-10-10

コメント:
Braveブラウザで動作確認済み。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>matrixToTable</title>
    <script>
        /**
         * 行列matrixをtableタグに変換する。
         * matrixは二次元配列で定義される。
         */
        function matrixToTable (matrix) {
            let table = document.createElement('table')
            if (!matrix.length) {
                return table
            }

            let thead = document.createElement('thead')
            let tr = document.createElement('tr')

            for (const col of matrix[0]) {
                let td = document.createElement('td')
                td.textContent = col
                tr.appendChild(td)
            }

            thead.appendChild(tr)
            table.appendChild(thead)

            let tbody = document.createElement('tbody')

            for (let y = 1; y < matrix.length; y++) {
                tr = document.createElement('tr')
                for (let x = 0; x < matrix[y].length; x++) {
                    const col = matrix[y][x]
                    let td = document.createElement('td')
                    td.textContent = col
                    tr.appendChild(td)
                }
                tbody.appendChild(tr)
            }

            table.appendChild(tbody)

            return table
        }

        document.addEventListener('DOMContentLoaded', () => {
            const matrix = [
                ['ID', 'Name', 'Age'],
                [1, 'Taro', 20],
                [2, 'Hanako', 30],
                [3, 'Pochi', 7],
            ]
            const table = matrixToTable(matrix)
            document.body.appendChild(table)
        })
    </script>
</head>
<body>
</body>
</html>