将数组渲染为表格形式

时间:2014-04-22 16:02:51

标签: javascript arrays csv

在这段代码中,我尝试在对其进行一些处理后将csv数据呈现为表格形式。我得到的结果是形式:

enter image description here

然而,我需要得到这样的结果:

enter image description here

我尝试使用._zip_underscore,它给了我一个带有underscore.js文件的例外。我不知道该怎么做。请帮忙。代码如下。

的JavaScript

function execData(file) 
{
    var reader = new FileReader();
    reader.readAsText(file);
    reader.onload = function (event)
    {
        var csv = event.target.result;
        var data = $.csv.toArrays(csv);
        var data1 = data;
        var header = data1.shift();
        var numeric = 0;
        var str = 0;
        var dtr = new Array();


        for (var i = 0; i < data1[i].length; i ++ )
        {
            // alert("backa");
            for (var m = 0; m < data1[m].length; m ++ )
            {
                for (var j = 0; j < data1.length; j ++ )
                {
                   var r = data1[j][i];
                   dt(r);

                }
            dttop(m);


            }
        }

        function dt(x)
        {
            //  alert("here");
            if (isFinite(x) == true)
            {
                numeric ++ ;

            }

            else
            {
                str ++ ;

            }
        }

        function dttop(f)
        {

            if (numeric > str)
            dtr[f] = "n";
            else
            dtr[f] = "s";
        }



        //  alert(dtr);
        var final = dtr.concat(data1);

        // to render in a tabular format
        var html = '';

        for (var row in final)
        {
            html += '<tr>\n';

            for (var item in final[row])
            {
                html += '<td>' + final[row][item] + '</td>\n';
            }
            // alert(html);
            html += '</tr>\n';
        }

        $('#contents').html(html);
    };
    reader.onerror = function ()
    {
        alert('Unable to read ' + file.fileName);

    };
}

HTML

<div id=inputs class=clearfix>
    <input type=file id=files name=files[] multiple />
</div>
<hr />

<output id=list></output>
<hr />

<table id=contents style="width:100%; height:400px;"></table>

1 个答案:

答案 0 :(得分:1)

据我了解......

数据结构打印为final[row][item],但dtr中的前三行只包含一个值。

将数组放在dtr的第一个位置。

dtr[0] = new Array();

你的功能应该更像是:

function dttop(f)
{
    if (numeric > str)
        dtr[0][f] = "n";
    else
        dtr[0][f] = "s";
}