Question

我所拥有的：一个csv（可以转换为xml或者可能转换为json）文件，该文件有很多行，每行包含几个存储有关某些配置文件的数据的列。

我需要做什么：根据html元素生成一个自动对应每行的html页面＆＃39;布局。由于我可能有数百行，并且所有页面都有相同的html元素（我的意思是，就像imdb或facebook个人资料），除了向用户显示的独特个人资料数据之外，稍后对页面布局的一个小改动需要几天的愚蠢手册工作

是否有某种框架可以做我想做的事情？谢谢！

Answer 1

过程

您需要三个步骤：

1）使用Ajax从服务器获取数据并将其转换为数组。你可以这样做，例如。使用以下jQuery：

$.ajax({
    type: "GET",
    url: "data.csv",
    success: CSVToHTMLTable
});

2）获得文件后，需要解析它。 Json和XML支持在JavaScript中是原生的。一个简单的＆amp;为CSV文件执行此操作的可靠方法是使用类似Papa Parse的库：

var data = Papa.parse(data).data;

3）您需要定义一个函数将数组转换为HTML表。以下是如何使用jQuery执行此操作的方法：

function arrayToTable(tableData) {
    var table = $('<table></table>');
    $(tableData).each(function (i, rowData) {
        var row = $('<tr></tr>');
        $(rowData).each(function (j, cellData) {
            row.append($('<td>'+cellData+'</td>'));
        });
        table.append(row);
    });
    return table;
}

把所有东西放在一起

以下是如何将所有内容放在一起的方法：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.js"></script>
<script>
    function arrayToTable(tableData) {
        var table = $('<table></table>');
        $(tableData).each(function (i, rowData) {
            var row = $('<tr></tr>');
            $(rowData).each(function (j, cellData) {
                row.append($('<td>'+cellData+'</td>'));
            });
            table.append(row);
        });
        return table;
    }

    $.ajax({
        type: "GET",
        url: "http://localhost/test/data.csv",
        success: function (data) {
            $('body').append(arrayToTable(Papa.parse(data).data));
        }
    });
</script>

Answer 2

如果您可以将csv转换为json，我建议json2html。

从存储在csv，xml或json中的数据生成HTML代码

2 个答案:

过程

把所有东西放在一起