如何基于CSV数据创建符合特定布局的动态HTML5表格

现有CSV数据如下：

No,Name,Year,School,ImageSrc,nnum
1,Gopi,1982,Great High School,/gopi.jpg,11
2,Kanna,1983,Awesome High School,/kanna.jpg,22
3,Raju,1984,Awesome High School,/raju.jpg,33
4,Mani,1985,Awesome High School,/mani.jpg,33
5,Rahul,1986,Awesome High School,/rahul.jpg,33

当前使用HTML+JavaScript生成表格的代码存在问题，生成的是单行所有列，期望实现：

• 每条CSV数据行对应一个HTML表格的列（即把CSV的一行内容整合成表格的一个单元格）
• 每5个这样的列后，创建新的表格行继续排列

当前错误代码：

<table>
    <tbody id="tableBody">
        <!-- This will be populated dynamically with JavaScript -->
    </tbody>
</table>

<script>
    // Sample CSV data
    const csvData = `1,Gopi,1982,Great High School,/gopi.jpg,11
    2,Kanna,1983,Awesome High School,/kanna.jpg,22
    3,Raju,1984,Awesome High School,/raju.jpg,33
    4,Mani,1985,Awesome High School,/mani.jpg,33
    5,Rahul,1986,Awesome High School,/rahul.jpg,33, 11
    2,Kanna,1983,Awesome High School,/kanna.jpg,22
    3,Raju,1984,Awesome High School,/raju.jpg,33
    4,Mani,1985,Awesome High School,/mani.jpg,33
    5,Rahul,1986,Awesome High School,/rahul.jpg,33`;


    function createTr(rows) {
        const newRow = document.createElement("tr");
        return newRow;
        // rows.forEach((row, rowIndex) => {
        //     const newRow = document.createElement("tr");
        //     return newRow;
        // })
    }

    function createTd(rowData, newRow){
        //rows.forEach((row, rowIndex) => {
            const newCell = document.createElement("td");
            newCell.textContent = rowData;
            // if(rowIndex % 4 == 0){
            //     newRow = createTr(rows);
            // }
            newRow.appendChild(newCell);
        //});
    }


    // Function to parse CSV data and create dynamic HTML table
    function createTableFromCSV(csv) {
        const tableBody = document.getElementById("tableBody");
        const rows = csv.split('\n');
        let newRow = createTr(rows);
        rows.forEach((row, rowIndex) => {
            const rowData = row.split(',');
            if(rowIndex % 4 == 0 && rowIndex != 0) {
                console.log(rowData, rowIndex);
            }
            createTd(rowData, newRow);
        })
        tableBody.appendChild(newRow);
    }

    // Call the function with your CSV data
    createTableFromCSV(csvData);
</script>

核心思路：遍历CSV行，每处理5条就创建新的表格行；将每条CSV行的内容格式化后放入一个表格单元格（列），再添加到当前表格行中。

修改后的完整代码：

<table>
    <tbody id="tableBody">
        <!-- This will be populated dynamically with JavaScript -->
    </tbody>
</table>

<script>
    // Sample CSV data
    const csvData = `1,Gopi,1982,Great High School,/gopi.jpg,11
    2,Kanna,1983,Awesome High School,/kanna.jpg,22
    3,Raju,1984,Awesome High School,/raju.jpg,33
    4,Mani,1985,Awesome High School,/mani.jpg,33
    5,Rahul,1986,Awesome High School,/rahul.jpg,33
    11,Kanna,1983,Awesome High School,/kanna.jpg,22
    3,Raju,1984,Awesome High School,/raju.jpg,33
    4,Mani,1985,Awesome High School,/mani.jpg,33
    5,Rahul,1986,Awesome High School,/rahul.jpg,33`;

    // 创建表格行
    function createTr() {
        return document.createElement("tr");
    }

    // 将单条CSV行数据格式化为表格单元格（列）
    function createTd(rowData) {
        const newCell = document.createElement("td");
        // 将CSV行的各个字段换行显示，让内容更清晰
        const formattedContent = rowData
            .map(item => item.trim()) // 去除字段前后空格
            .join('<br>'); // 用换行符分隔每个字段
        newCell.innerHTML = formattedContent;
        return newCell;
    }

    // 解析CSV并生成目标表格
    function createTableFromCSV(csv) {
        const tableBody = document.getElementById("tableBody");
        // 分割CSV为行，同时过滤空行
        const rows = csv.split('\n').filter(row => row.trim() !== '');
        
        let currentRow = createTr();
        rows.forEach((row, rowIndex) => {
            const rowData = row.split(',').filter(item => item.trim() !== ''); // 分割每行并过滤空字段
            // 创建单元格并添加到当前行
            currentRow.appendChild(createTd(rowData));

            // 每5条数据创建新行，且不是最后一条数据时才创建（避免末尾空行）
            if ((rowIndex + 1) % 5 === 0 && rowIndex !== rows.length - 1) {
                tableBody.appendChild(currentRow);
                currentRow = createTr();
            }
        });
        // 添加最后一行
        tableBody.appendChild(currentRow);
    }

    // 执行生成表格
    createTableFromCSV(csvData);
</script>

• 过滤无效数据：处理CSV时过滤空行和空字段，避免生成空的单元格或行
• 单元格内容格式化：用<br>将CSV行的各个字段换行显示，让每个列的内容更易读
• 行拆分逻辑：遍历CSV行时，每处理5条就将当前行添加到表格，然后创建新行；最后不要忘记添加剩余的行
• 简化函数职责：createTr和createTd只负责创建对应元素并返回，职责更单一，便于维护

内容的提问来源于stack exchange，提问作者GTemp