如何在HTML表中創建多個列？

Question

到目前為止，這是我的代碼，它從CSV中提取數據。 它僅創建一列，但我希望將數據填充為最多4列，其中包含必要的行。 我怎樣才能做到這一點？ -請注意，數據最初是在電子表格中的兩列中，即名稱數據，目標是使每個單元格為名稱：數據。

var test_data = data.split(/\r?\n|\r/);
var table_data = '<table>';
var count = 0;

for (var i = 0; i < test_data.length; i++) {
    var cell_data = test_data[i].split(",");
    table_data += '<tr>';
    for (var j = 0; j < cell_data.length - 1; j++) {
        if(i === 0) {
            table_data += '<th colspan="4">' + cell_data[j] + ":" + cell_data[j + 1] + '</th>';
        } else {
            table_data += '<td>' + cell_data[j] + ":" + cell_data[j + 1] + '</td>';
        }
    }
    alert(count);
    if (count == 3) {
        table_data += '</tr>';
        count = 0;
    } else {
        count += 1;
    }

    //table_data += '</tr>'
}
table_data += '</table>';
$('#loadData').html(table_data);

Answer 1

這是我最終使用的解決方案。 我使用計數器來確定僅在行中包含四段數據后才能打開和關閉行的列數。

    var test_data = data.split(/\r?\n|\r/);
    var table_data = '<table>';
    var count = 0;

    for (var i = 0; i < test_data.length; i++) {
        var cell_data = test_data[i].split(",");
        if (count == 0) {
            table_data += '<tr>';
        }
        for (var j = 0; j < cell_data.length - 1; j++) {
            if(i === 0) {
                table_data += '<th>' + cell_data[j] + ":" + cell_data[j + 1] + '</th>';
            } else {
                table_data += '<td>' + cell_data[j] + ":" + cell_data[j + 1] + '</td>';
            }
        }

        if (count == 3) {
            table_data += '</tr>';
            count = 0;
        } else {
            count += 1;
        }
        //table_data += '</tr>'
    }
    table_data += '</table>';
    $('#loadData').html(table_data);

Answer 2

如以下示例中所述，形成適當的表結構。 我也相信您應該得到一個多維數組作為數據。在循環中，您只在尋找一維數據。 請通過console.log打印數據，以了解如何獲取數據以進一步進行邏輯處理

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Savings2</th>
    <th>Savings3</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
    <td>$100</td>
     <td>$100</td>
  </tr>
</table>