Question

我有一个选择框，它只是向函数发送值。然后函数得到1-100。我有一个包含100行和5列的CSV文件。我想创建一个函数，该函数将根据先前由选择框发送到该函数内的4个不同变量的行号来解析第4-5列中的值。能告诉我需要用什么来实现这个目标吗？

让我们说CSV看起来像

1, Robert, Lee, robert@mymail.com, 100001
2, John, Smith, john@mymail.com, 10002
3, Scott, Jones, scott@mymail.com, 10003
4, etc.

所以当我从dropmenu中选择1时。我应该把“Robert”，“Lee”，“robert @ mymail.com”，“100001”分配给像

这样的变量

var firstname = 
var lastname =
var email =
var idn =

首次评论后更新：

让我们更简单一点。

假设我有HTML

<button id="1" onclick="getcolumns(this)">One</button>
<button id="2" onclick="getcolumns(this)">Two</button>
<button id="3" onclick="getcolumns(this)">Three</button>
<button id="4" onclick="getcolumns(this)">Four</button>
<div id="area"></div>

然后是JS函数

function getcolumns(button) {
    var idm = buttton.id;
    document.getElementById("area").innerHTML = idm;
}

所以我想按下'Three'按钮然后innerHTML显示'3'。

我需要的功能将基于下图：

function getcolumns(button) {
    [GET File.csv]
    var idm = buttton.id; // lets say idm = 3 at the moment//
    [Parse values from Col2, Col3, Col4, Col5, from ROW(idm)]
    var firstname = col2;
    var lastname = col3;
    var email = col4;
    var idn = col5;
    document.getElementById("area").innerHTML = col2+'<br>'+col3+'<br>'+col4+'<br>'+col5
}

基本上我会得到

<div id="area">
 Scott
 Jones
 scott@mymail.com
 10003
</div>

Answer 1

我使用JQuery-CSV plugin（警告：此插件有Mac CSV文件的错误。我已将其修复到我的分支中，只需将其上传到github）。

HTML

<input type="file" id="file" name="file" onchange="handleFileSelect()" />

处理文件：

JavaScript函数在选择错误文件时重置输入（更改工作所必需的）

var resetInput = function(inputSelector) {
    $(inputSelector).wrap('<form>').closest('form').get(0).reset();
    $(inputSelector).unwrap();
}

用于将CSV解析为列的JavaScript函数

var updateDom = function(file, onError) {
    var reader = new FileReader();
    reader.readAsText(file);
    reader.onload = function(event) {
        var csv = event.target.result;
        var data;
            try {
                data = $.csv.toObjects(csv);
                fileUploaded = true;
            }
            catch(e) {
                importErrorMessage = "Your CSV File could not be imported. The error has been logged. If it's an error we can fix, we will.";
                onError();
                fileUploaded = false;
                console.log(e);
                return;
            }
            csv = {dataRows : data};
            var columns = [];//header row
            for (var prop in data[0])
            {
                columns.push(prop);
            }
            //update dom here
        }
    };
var importErrorMessage = "";

实际上处理逻辑以确保选择正确类型的文件。

var handleFileSelect = function(evt) {
    if(evt &&evt.files[0]) {
        var file = evt.files[0];
            if(file.name.split('.').pop() != 'csv' && (
                file.type !== 'text/csv' ||
                file.type !== 'text/comma-separated-values' ||
                file.type !== 'application/csv' ||
                file.type !== 'application/excel' ||
                file.type !== 'application/vnd.ms-excel' ||
                file.type !== 'text/anytext')) {
                    console.log(file.type);
                    importErrorMessage = "Incorrect file type uploaded. We only accept files ending in .csv";
                    resetInput(evt);
                    return;
            }
            var callback = function() {
                resetInput(evt);
                fileUploaded = false;

            }
                updateDom(file, callback);
        }

    };

将CSV解析为JavaScript并使用一种VLOOKUP

1 个答案:

HTML