php - 使用 JavaScript 单步执行 CSV

Question

所以我有一个如下的 csv 文件

Name1,url1
Name2,url2
Name3,url3

我想创建一个javascript(如果需要的话也可以使用PHP)来遍历csv的每一行，并将名称与网站进行比较。图片位于左上象限，只是一个显示“名称”的框，页面的右半部分加载 url，左下象限有一个左右箭头，您可以单击该箭头在 CSV 中移动。

我正在考虑使用 iFrame 来分解页面。真正的挑战是加载 CSV。我正在考虑使用 php 来完成此操作，并将所有数据放入 html 页面中，但如果我的 CSV 很大，这可能是一个问题。

我是否以正确的方式解决这个问题？

Answer 1

我以前做过一次类似的事情。进行 AJAX 调用以获取 CSV(使用 jQuery):

var x = $.ajax('schedule.csv').done( function(){parse(x);});

然后像这样解析数据:

function parse (data)
{
    cells=[];
    rowBreaks = [];
    rowCounter=0;
    var cellCounter=0;
    var inQuotes = false;

    y=data.responseText;
    console.log(y.length);
    for(n=0; n<y.length; n++)
    {
        if(n == 0 & y[n] != ",")
            cells[cellCounter]=y[n];
        if(n != 0 && y[n] != ',')
        {
            cells[cellCounter]+=y[n];
        }
        if(y[n] == '"')
            inQuotes = !inQuotes;
        if(n>0 && !inQuotes && y[n] == ",")
        {
            if(cells[cellCounter] == undefined)
                cells[cellCounter] = " ";
            else
                cells[cellCounter]+=" ";
            cellCounter++;
        }
        if(n>0 && !inQuotes && (y[n] == "\n" || y[n] == "\r"))
        {
            rowBreaks[rowCounter] = cellCounter;
            rowCounter++;
        }
        if(cells[cellCounter] == undefined)
            cells[cellCounter] = "";
    }
    fixRows();
    writeTable();
    $("body").css("overflow-x", "auto");

}

您不需要所有这些，但它可以非常方便地解析 CSV 文件。如果有帮助的话，writeTable() 函数如下所示:

function writeTable()
{
    table=$("<table border='1' cellpadding='1' />");
    var q;
    var rowBlank;
    var rowLength = rowBreaks[0]-8;
    for(z=0; z<rowBreaks.length; z++)    
    {
        tr = $("<tr />");
        if(z == 0)
            tr.addClass("header");
        rowBlank = true;
        for(i=0; i<rowLength; i++)
        {
            q=(z)*25+i;
            td=$("<td />").html(cells[q]);
            tr.append(td);
            if(cells[q] != " " && cells[q] != "" && cells[q] != "\n" && cells[q] != "\r")
                rowBlank = false;
        }
        /*if(!rowBlank)*/
        table.append(tr);
    }

    table.css({
        "border-spacing"    : 0,
        "width"             : "100%",
        "height"            : "99%"

    });

    $("#schedule").html("");
    $("#schedule").append(table);
    sizeTable();
}

虽然很难看，但对我有用。

请注意，这都是真实的代码，因此您不需要我用于调试的 console.log() 或保留任何变量名称。在我让公司切换到 Google 文档之前，它被用来解析保存为 Excel 文件的 80 x 20 Excel 工作表，因此它在 CSV 文件大小方面非常强大。