如何在HTML表格中创建多个列?

时间:2018-05-31 01:18:01

标签: javascript jquery html

到目前为止,这是我的代码,它从CSV中提取数据。它只创建一个列,但我希望数据最多填充4列,并根据需要填充多行。我怎样才能做到这一点? - 请注意,数据最初位于两列名为“数据”的电子表格中,目标是使每个单元格成为名称:数据。

This is the tooltip i am trying to get working
<li class="list-group-item list-group-item-action list-group-item-success">
    <i class="fas fa-check" data-toggle="tooltip" data-placement="bottom" title="This does not include the deposit required and will not be refunded for any reason"></i> Satisfaction Guaranteed <i class="fas fa-info info"></i></li>

2 个答案:

答案 0 :(得分: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);

答案 1 :(得分:-1)

形成一个正确的表结构,如下例所示。另外我相信你应该得到一个多维数组作为你的数据。在你的循环中,你只是在寻找一维数据。请通过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>