Javascript &引用；“未定义”；填充JSON数据时显示在最后一列中_Javascript_Jquery_Html_Json

Javascript &引用；“未定义”；填充JSON数据时显示在最后一列中

javascript jquery html json

Javascript &引用；“未定义”；填充JSON数据时显示在最后一列中,javascript,jquery,html,json,Javascript,Jquery,Html,Json,我已将csv转换为JSON对象，并将其填充到html表中。其余列都可以，但表的最后一列显示“未定义”CSV文件- 表格显示为- 这里有什么问题 HTML文件- <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html> <head> <title>J

我已将csv转换为JSON对象，并将其填充到html表中。其余列都可以，但表的最后一列显示“未定义”CSV文件-

表格显示为- 这里有什么问题

HTML文件-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>
<html>
<head>
    <title>Japan Automation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"> </script>
    <!--<script type="text/javascript" src="JavaScript.js"></script>-->
    <script type="text/javascript" src="JavaScript4.js"></script>


    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }

        th, td {
            padding: 15px;
        }

        th {
            text-align: left;
        }

        table {
            border-spacing: 5px;
        }

        .guide {
            text-decoration: underline;
            text-align: center;
        }

        .odd {
            color: #fff;
            background: #666;
        }

        .even {
            color: #666;
        }

        .hot {
            border: 1px solid #f00;
        }
    </style>

</head>
<body>

    <div class="container">
        <div class="row">
            <h2>Global Order Visibility</h2>
        </div>
        <div class="panel panel-primary">
            <div class="panel-heading">Japan Automation Tool</div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-sm-12 col-sm-offset-1">

                        <form id="form1" runat="server" class="form-horizontal">
                            <div class="form-group">
                                <div class="col-sm-5">
                                    <div class="col-sm-6">
                                        <input type="file" accept=".csv" id="fileUpload" />
                                    </div>
                                    <div class="col-sm-6">
                                        <input type="button" id="upload" class="btn btn-primary" value="Upload" />
                                    </div>

                                </div>
                                <div class="col-sm-7">
                                    <div class="col-sm-2">
                                        <input type="button" id="cancel" class="btn btn-primary btn pull-right" value="Cancel/Save" style="visibility: hidden" />
                                    </div>
                                    <div class="col-sm-2">
                                        <input type="button" id="process" class="btn btn-primary btn pull-right" value="Process" style="visibility: hidden" />
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-12">
                        <div class="panel panel-default" style="align-self: center">
                            <div class="panel-body" style="max-height: 400px; min-height: 400px; overflow-y: scroll;">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <center>
                                                        <div class="input-append" id="filterDev" style="visibility:hidden">
                                                          <input name="search" id="inputFilter" placeholder="Enter ID to filter" />
                                                             <input type="button" value="Filter" id="filter" class="btn btn-primary" />
                                                                </div></center>
                                    </div>
                                    <br />
                                    <br />

                                </div>
                                <div class="row">
                                    <div class="col-sm-12" id="dvCSV">
                                        <table id="my-table">

                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-12">
                        <p id="download" style="color: cornflowerblue; visibility: hidden"><strong>Please click the below links to download the processed file..</strong></p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="col-sm-3">
                            <p id="File1" style="color: cornflowerblue; text-decoration: underline; visibility: hidden">File1 Download</p>
                        </div>
                        <div class="col-sm-3">
                            <p id="File2" style="color: cornflowerblue; text-decoration: underline; visibility: hidden">File2 Download</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</body>
</html>
<script type="text/javascript">

    $("#cancel").on("click", function () {
        $('input:checked').each(function () {
            $(this).closest("tr").remove();
        });
    });


    $(function () {
        $("#process").bind("click", function () {

            document.getElementById("File1").style.visibility = "visible";
            document.getElementById("File2").style.visibility = "visible";
            document.getElementById("download").style.visibility = "visible";

        });

    });

    $("#filter").click(function () {
        ids = $("#inputFilter").val();
        if (ids != "") {
            idsArray = ids.split(",");
            $("#my-table tr:gt(0)").hide();
            $.each(idsArray, function (i, v) {
                $("#my-table tr[data-id=" + v + "]").show();
            })
        } else {
            $("#my-table tr").show();
        }
    });

</script>


日本自动化
表，th，td{
边框：1px纯黑；
边界塌陷：塌陷；
}
th，td{
填充：15px；
}
th{
文本对齐：左对齐；
}
桌子{
边界间距：5px；
}
.指南{
文字装饰：下划线；
文本对齐：居中；
}
.奇怪{
颜色：#fff；
背景:#666；
}
.甚至{
颜色：#666；
}
.热{
边框：1px实心#f00；
}
全球订单可见性
日本自动化工具




请单击以下链接下载处理后的文件。
下载文件1
下载文件2
$（“#取消”）。在（“单击”上，函数（）{
$（'input:checked'）。每个（函数（）{
$（this）.tr.remove（）；
});
});
$（函数（）{
$（“#进程”）.bind（“单击”，函数（）{
document.getElementById（“File1”）.style.visibility=“可见”；
document.getElementById（“File2”）.style.visibility=“可见”；
document.getElementById（“下载”）.style.visibility=“可见”；
});
});
$（“#过滤器”）。单击（函数（）{
ids=$（“#inputFilter”）.val（）；
如果（ID！=“”）{
idsArray=ids.split（“，”）；
$（“#我的表tr:gt（0）”）.hide（）；
$.each（数组、函数（i、v）{
$（“#我的表tr[data id=“+v+”]）。show（）；
})
}否则{
$（“#我的桌子tr”）.show（）；
}
});

JavaScript4.js

$(function () {
    $("#upload").bind("click", function () {

        var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
        if (regex.test($("#fileUpload").val().toLowerCase())) {
            if (typeof (FileReader) != "undefined") {
                var reader = new FileReader();
                reader.onload = function (e) {
                    //var table = $("<table id='name'/>");
                    var lines = e.target.result.split("\n");
                    var result = [];
                    var headers = lines[0].split(",");
                    //alert(headers);

                    for (var i = 1; i < lines.length; i++) {
                        var obj = {};
                        var currentline = lines[i].split(",");

                        for (var j = 0; j < headers.length; j++) {
                            obj[headers[j]] = currentline[j];
                        }
                        result.push(obj);
                    }


                    populateTable(result);
                    document.getElementById("cancel").style.visibility = "visible";
                    document.getElementById("process").style.visibility = "visible";
                    document.getElementById("filterDev").style.visibility = "visible";
                }
                reader.readAsText($("#fileUpload")[0].files[0]);
            }
        }

    });
});

$(function () {
    $("#process").bind("click", function () {

        document.getElementById("File1").style.visibility = "visible";
        document.getElementById("File2").style.visibility = "visible";

    });

});

function populateTable(finalObject) {

    var obj = finalObject;
    var table = $("<table id='my-table' />");
    table[0].border = "1";
    var columns = Object.keys(obj[0]);

    var columnCount = columns.length;
    var row = $(table[0].insertRow(-1));

    for (var i = 0; i < columnCount; i++) {
        var headerCell = $("<th />");
        headerCell.html([columns[i]]);
        row.append(headerCell);
    }

    $.each(obj, function (i, obj) {
        //row = '<tr data-id="' + obj.ID + '"><td>' + obj.ID + '</td><td>' + obj.NAME + '</td><td>' + obj.CITY + '</td><td>' + obj.ADDRESS + '</td></tr>';
        row = '<tr data-id="' + obj.ID + '"><td>' + obj.ID + '</td><td>' + obj.NAME + '</td><td>' + obj.CITY + '</td><td>' + obj.ADDRESS + '</td></tr>';
        table.append(row);
    });


    var dvTable = $("#dvCSV");
    dvTable.html("");
    dvTable.append(table);

}

$（函数（）{
$（“#上载”）.bind（“单击”），函数（）{
var regex=/^（[a-zA-Z0-9\s\\\.\-：]）+（.csv|.txt）$/；
if（regex.test（$（“#fileUpload”）.val（）.toLowerCase（））{
if（typeof（FileReader）！=“未定义”）{
var reader=new FileReader（）；
reader.onload=函数（e）{
//变量表=$（“”）；
变量行=e.target.result.split（“\n”）；
var结果=[]；
var headers=行[0]。拆分（“”，“”）；
//警报（标题）；
对于（变量i=1；i var headers = lines[0].split(",");
 for (var i = 1; i < headers.length; i++) {
    var header = headers[i];
    header = header.replace(/(\r\n|\n|\r)/gm,"");
    headers[i] = header;
  }


 $("#upload").bind("click", function () {

    var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
    if (regex.test($("#fileUpload").val().toLowerCase())) {
      if (typeof (FileReader) != "undefined") {
        var reader = new FileReader();
        reader.onload = function (e) {

          var lines = e.target.result.split("\n");
          var result = [];

          for (var i = 0; i < lines.length; i++) {
            var arr = [];
            var currentline = lines[i].split(",");
            for (var j = 0; j < currentline.length; j++) {
              arr.push(currentline[j]);
            }
            result.push(arr);
          }

          populateTable(result);
          document.getElementById("cancel").style.visibility = "visible";
          document.getElementById("process").style.visibility = "visible";
          document.getElementById("filterDev").style.visibility = "visible";
        }
        reader.readAsText($("#fileUpload")[0].files[0]);
      }
    }

  });

function populateTable(finalArray) {

  var table = $("<table id='my-table' />");
  table[0].border = "1";
  var columns = finalArray[0];

  var columnCount = columns.length;
  var row = $(table[0].insertRow(-1));

  for (var j = 0; j < columns.length; j++) {
    var headerCell = $("<th>").text([columns[j]]);
    row.append(headerCell);
  }


  for (var i = 1; i < finalArray.length; i++) {
    var item = finalArray[i];
    row = '<tr data-id="' + item[0] + '"><td>' + item[0] + '</td><td>' + item[1] + '</td><td>' + item[2] + '</td><td>' + item[3] + '</td></tr>';
    table.append(row);

  };

  var dvTable = $("#dvCSV");
  dvTable.html("");
  dvTable.append(table);

}