0

I posted a question regarding parsing large csv files Jquery crashes while parsing large csv file. It involves reading a csv file and tablifying it. I tried using the code given in one of the responses but it doesn't work..

Here's my entire code:

<!DOCTYPE html>
 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="PapaParse-4.1.0/papaparse.js"></script>
<script src="virtual-list-master/vlist.js"></script>
<script>
$("#fUpload").bind("change", function(evt) {
    var bigFile = evt.target.files[0];
    var rows = [];

    Papa.parse(bigFile, {
        delimiter: ",",
        newline: "\n",
        header: false,
        dynamicTyping: false,
        worker: false,
        chunk: function(results) {
            rows = rows.concat(results.data);
        },
        complete: function() {
            var list = new VirtualList({
              h: 300,
              itemHeight: 30,
              totalRows: rows.length - 1,
              generatorFn: function(row) {
                  var el = document.createElement("tr");
                  var html = '';
                  html += '<td>' + row + '</td>';
                  for(var j = 0; j < rows[row].length; j++) {
                      html += '<td>' + rows[row][j] + '</td>';
                  }
                  el.innerHTML = html;
                  return el;
              }
            });

            document.getElementById('table').appendChild(list.container)
        }
    });
});
</script>

<input type="file" id="fUpload" />
<table style="width: 100%">
    <tbody id="table">
    </tbody>
</table>

I have Papaparse-4.1.0 and virtual-list-master folders within my current working directory. But when I open this in a browser and upload a csv file, no table is printed below. There seems to be no defects in the upload function since the answerer showed a fiddle demo of the same; I'm just reusing it here. You can see the fiddle here:http://jsfiddle.net/8e99j5v9/5/

Can someone please tell me why my code doesn't work?

EDIT I thank Sergiu for proposing a working solution but the resultant table that is delivered is thoroughly garbled.. Rows and columns are overlapping like this This is how my table looks

Can someone help?

4

1 回答 1

1

JavaScript 代码按照其在 HTML 结构中出现的顺序进行解释/执行。它也只能“访问”它之前的 HTML 。所以$("#fUpload")会尝试找到一个 id #fUploadin的元素body，但考虑到我之前所说的（东西“加载/执行”的顺序），它什么也找不到，因为<input type="file" id="fUpload" />在这个标签之后。script

解决方案： 1) 移动部分正文<script>中的标签$("#fUpload").bind(... $(document).ready` 回调。（在这里阅读）headand the input and table in asection and move thecode in a

2）将输入和表格移动到脚本标签上方。

为什么 1 会起作用？因为$(document).ready(.... 这告诉其中的代码在整个 HTML（包括输入）加载后执行。

于 2015-03-10T10:07:37.043 回答