Question

我希望有人可以帮我找出一种垂直打印数组的方法。请注意我的阵列长度不相等。

|birthdate       | 3   | null |
|birthmonth      | 2   | null |
|contact_id      | 244 | 515  |
|company_id      | 3   | 3    |
|contact_type_id | 1   | 1    |

我需要以下面的格式显示数据如何在垂直方向上显示这个数组我需要输出如下表，我该怎么做？

<html>
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css"> 
    <script type="text/javascript" src="../ext/ext-all-debug.js"></script>
    <script type="text/javascript">
    Ext.onReady(function(){

        Ext.QuickTips.init();
        Ext.FocusManager.enable();

        Ext.define('Test.Window', {
            extend: 'Ext.window.Window',

            title: 'Test',
            closeAction: 'destroy',
            border: false,
            width: 560,
            height: 500,
            modal: true,
            closable: true,
            resizable: false,

            initComponent: function() {
                var me = this;
                me.callParent(arguments);

                me.edit1 = Ext.create('Ext.form.field.Text', {
                    labelWidth: 200,
                    width: 300,
                    fieldLabel: 'Test edit (onkeyup + tooltip)', 
                    enableKeyEvents: true,
                    listeners: {
                        keyup: function (f, e) {
                            var text = f.getValue();
                            if (text.substr(0, 1) == ' ') {
                                var posXY = f.el.getXY();
                                var tooltip =  Ext.create('Ext.tip.ToolTip', {
                                    anchor: 'top',
                                    anchorToTarget: false,
                                    targetXY: [posXY[0] + f.getWidth(), posXY[1]],
                                    hideDelay: 5000,
                                    closable: false,
                                    html: 'Front Space shall be restricted.'
                                });
                                tooltip.show();
                            }

                        }
                    }
                });

                me.edit2 = Ext.create('Ext.form.field.Text', {
                    labelWidth: 200,
                    width: 300,
                    fieldLabel: 'Test edit (validator + quicktip)', 
                    enableKeyEvents: true,
                    msgTarget: 'side',
                    validator: function (value) {
                        if (value.substr(0, 1) == ' ') {
                            return 'Front Space shall be restricted';
                        } else {
                            return true;
                        }
                    }
                });

                me.edit3 = Ext.create('Ext.form.field.Text', {
                    labelWidth: 200,
                    width: 300,
                    fieldLabel: 'Test edit (onkeyup + message)', 
                    enableKeyEvents: true,
                    listeners: {
                        keyup: function (f, e) {
                            var text = f.getValue();
                            if (text.substr(0, 1) == ' ') {
                                var msg = Ext.Msg.show(
                                    {
                                    msg: "Front Space shall be restricted"
                                    }
                                );
                                setTimeout(
                                    function() {
                                        msg.hide();
                                    }, 
                                    2000
                                );
                            }

                        }
                    }
                });

                me.add(me.edit1);
                me.add(me.edit2);
                me.add(me.edit3);
            }
        }); 

        var win = new Test.Window({

        });
        win.show();

    });
    </script>   
    <title>Test</title>
    </head>
    <body>
    </body>
</html>

Answer 1

您可以尝试以下操作。

<强>假设

所有数组长度相同
您希望表格包含所有数组（针对仅针对前3个数组的示例输出）

逻辑是迭代任何数组，然后转换或准备另一个数组。它被称为转置2D数组

var arr = [
   ["birthdate", "birthmonth", "contact_id", "company_id", "contact_type_id", "type_name", "vendor_type_id", "is_active", "first_name", "last_name", "email_address", "phone_number", "mobile_number", "fax_number", "address", "state_id", "state_name", "zip_code", "labels", "profile_logo", "website_url", "employees", "parent_id"],
   ["3", "2", "244", "3", "1", "Customers", null, "1", "sorthia", "daksh choratiya", "hellodaksh@gmail.com", "8787877887", "7878787887", "7.87879E+11", "sdfkjhfkd", null, null, "45454", ",undefined,", "https://s3.us-west-2.amazonaws.com/home-inspection%2FContactsCSV-EXCEL-Files/1519826594241_download.png"],
   [null, null, "515", "3", "1", "Customers", null, "1", "prashant", "gadhiya bhai", "pg@gmail.com", "1231321321", "1321321313", "1321321231", "13213213", "1", "Alabama", "12345", ",undefined,"],
   ["11", "11", "529", "3", "1", "Customers", null, "1", "Hardik bhai bhai", "Patel bhai", "hardik121@gmail.com", "98765432100", "65498732100", "9.87978E+11", "Addrreess surat", "6", "Colorado", "987640", ",undefined,"]
];


var result = arr[0].map(function(item, index){
    var temp = [];
    for (var i = 0; i < arr.length; i++) {
      temp.push(arr[i][index]);
    }
    return temp;
});

console.log(result);

Answer 2

对于不同长度的数组，您只需进行if检查即可。

var arr = [
   ["birthdate", "birthmonth", "contact_id", "company_id", "contact_type_id", "type_name", "vendor_type_id", "is_active", "first_name", "last_name", "email_address", "phone_number", "mobile_number", "fax_number", "address", "state_id", "state_name", "zip_code", "labels", "profile_logo", "website_url", "employees", "parent_id"],
   ["3", "2", "244", "3", "1", "Customers", null, "1", "sorthia", "daksh choratiya", "hellodaksh@gmail.com", "8787877887", "7878787887", "7.87879E+11", "sdfkjhfkd", null, null, "45454", ",undefined,", "https://s3.us-west-2.amazonaws.com/home-inspection%2FContactsCSV-EXCEL-Files/1519826594241_download.png"],
   [null, null, "515", "3", "1", "Customers", null, "1", "prashant", "gadhiya bhai", "pg@gmail.com", "1231321321", "1321321313", "1321321231", "13213213", "1", "Alabama", "12345", ",undefined,"],
   ["11", "11", "529", "3", "1", "Customers", null, "1", "Hardik bhai bhai", "Patel bhai", "hardik121@gmail.com", "98765432100", "65498732100", "9.87978E+11", "Addrreess surat", "6", "Colorado", "987640", ",undefined,"]
];
html = "<table>";
for (var i = 0; i < arr[0].length; i++) {
  html += "<tr>";
  for (var j = 0; j < arr.length; j++) {
    var val = arr[j][i];
    if (val == undefined || val == null) val = "-";
    html += "<td>" + val + "</td>";
  }
  html += "</tr>";
}
html += "</table>";
$("body").append(html);

Answer 3

＆＃13;

var temp = [
    ["birthdate", "birthmonth", "contact_id", "company_id", "contact_type_id", "type_name", "vendor_type_id", "is_active", "first_name", "last_name", "email_address", "phone_number", "mobile_number", "fax_number", "address", "state_id", "state_name", "zip_code", "labels", "profile_logo", "website_url", "employees", "parent_id"],
    ["3", "2", "244", "3", "1", "Customers", null, "1", "sorthia", "daksh choratiya", "hellodaksh@gmail.com", "8787877887", "7878787887", "7.87879E+11", "sdfkjhfkd", null, null, "45454", ",undefined,", "https://s3.us-west-2.amazonaws.com/home-inspection%2FContactsCSV-EXCEL-Files/1519826594241_download.png"],
    [null, null, "515", "3", "1", "Customers", null, "1", "prashant", "gadhiya bhai", "pg@gmail.com", "1231321321", "1321321313", "1321321231", "13213213", "1", "Alabama", "12345", ",undefined,"],
    ["11", "11", "529", "3", "1", "Customers", null, "1", "Hardik bhai bhai", "Patel bhai", "hardik121@gmail.com", "98765432100", "65498732100", "9.87978E+11", "Addrreess surat", "6", "Colorado", "987640", ",undefined,"]
];

var body = document.getElementsByTagName('body')[0];
var tbl = document.createElement('table');
tbl.style.width = '50%';
tbl.setAttribute('border', '1');
var tbdy = document.createElement('tbody');
for (var i = 0; i < temp[0].length; i++) {
    var tr = document.createElement('tr');
    for (var j = 0; j < temp.length; j++) {
        if (temp[j][i]) {
            tr.insertCell(j).innerHTML = temp[j][i];
        } else {
            tr.insertCell(j).innerHTML = "";
        }
    }

    tbdy.appendChild(tr);
}
tbl.appendChild(tbdy);
body.appendChild(tbl)

＆＃13;

如何显示数组垂直表格形式的javascript

3 个答案: