javascript - 如何以正确的格式打印 2 个数组的值

Question

我有两个数组，如下所示。第一个数组仅包含 2 个重复的字段Email ID、Address。

arr1 = [
  " Email ID: md@floretmedia.com",
  "# 361, 7TH CROSS, 1ST BLOCK JAYANAGAR, BANGALORE KA 560011 IN",
  " Email ID: santhosh@thidff.com",
  "# 46/4, Garvebhavi Playa kudul gate, Hossur Rd, Begur hobali bangalore Bangalore KA 560068 IN",
  " Email ID: rajiv.sawhney@flipkart.com",
  "Vaishnavi Summit, Ground Floor, 7th Main, 80 Feet Road, 3rd Block, Koramangala Industrial Layout, Bangalore KA 560034 IN", " Email ID: sachinjain@justdial.com",
  "PALM COURT BLDG.- M, 501/B, 5TH FL, NEW LINK RD. BESIDE GOREGAON SPORTS COMPLEX MALAD WEST MH 400064 IN", " Email ID: -", "MALANCHA ROAD KHARAGPUR MIDNAPUR WB 000000 IN"
];

我的第二个数组包含三个字段，Id、Name、Date，如图所示:

arr2 = [
  "05141859", " MURUGESAN DHANAPAL", "22 December 2011",
  "06372276", " RAJESWARI GOMATHINAYAGAM", "04 December 2012",
  "01815226", " RAJIV SAWHNEY", "11 April 2016",
  "00202052", " VENKATACHALAM STHANU SUBRAMANI", "05 December 2006"
];

我想要的输出是:

<tr>
  <th>Id</th>
  <th> Name</th>
  <th>date</th>
  <th>Email Id</th>Address
  <th></th>
</tr>'

我正在使用这段代码:

$.each(arr1, function(i) {
  content += '<tr><td>' + arr[i % 2] + '</td><td>' + arr[i + 1] + '</td><td>' + arr[i + 2] + '</td>';
  return false;
});

$.each(cont, function(i) {
  content += '<td>' + cont[i % 2] + '</td><td>' + cont[i % 2 + 1] + '</td></tr>';

  return false;
});

Answer 1

好吧，让我不仅给你标题，还给你整个表格。我使用通用函数 tableMaker 来获取表格 HTML。它需要一个对象数组。每个对象代表一行，而属性显然是标题。 tableMaker 采用两个参数，如 tableMaker(tableData,true) 如果第二个参数为真，则显示标题，否则不显示。

function tableMaker(o,h){
  var keys = Object.keys(o[0]),
  rowMaker = (a,t) => a.reduce((p,c,i,a) => p + (i === a.length-1 ? "<" + t + ">" + c + "</" + t + "></tr>"
                                                                  : "<" + t + ">" + c + "</" + t + ">"),"<tr>"),
      rows = o.reduce((r,c) => r + rowMaker(keys.reduce((v,k) => v.concat(c[k]),[]),"td"),h ? rowMaker(keys,"th") : []);
  return "<table>" + rows + "</table>";
}

var data1 = [" Email ID: md@floretmedia.com","# 361, 7TH CROSS, 1ST BLOCK JAYANAGAR, BANGALORE KA 560011 IN",
              " Email ID: santhosh@thidff.com", "# 46/4, Garvebhavi Playa kudul gate, Hossur Rd, Begur hobali bangalore Bangalore KA 560068 IN",
              " Email ID: rajiv.sawhney@flipkart.com","Vaishnavi Summit, Ground Floor, 7th Main, 80 Feet Road, 3rd Block, Koramangala Industrial Layout, Bangalore KA 560034 IN",
              " Email ID: sachinjain@justdial.com","PALM COURT BLDG.- M, 501/B, 5TH FL, NEW LINK RD. BESIDE GOREGAON SPORTS COMPLEX MALAD WEST MH 400064 IN",
              " Email ID: -", "MALANCHA ROAD KHARAGPUR MIDNAPUR WB 000000 IN"
            ].reduce((data,e,i) => !(i%2) ? data.concat({"Email ID": e.split(":")[1].trim()})
                                          : (data[data.length-1].Address = e, data) ,[]),
    data2 = ["05141859", " MURUGESAN DHANAPAL", "22 December 2011",
             "06372276", " RAJESWARI GOMATHINAYAGAM", "04 December 2012",
             "01815226", " RAJIV SAWHNEY", "11 April 2016",
             "00202052", " VENKATACHALAM STHANU SUBRAMANI", "05 December 2006"
            ].reduce((data,e,i) => i%3 === 0 ? data.concat({"Id": e})
                                             : i%3 === 1 ? (data[data.length-1].Name = e.trim(), data)
                                                         : (data[data.length-1].Date = e, data),[]),
tableData = data2.map((o,i) => Object.assign({},o,data1[i])),
tableHTML = tableMaker(tableData,true);
myTable.innerHTML = tableHTML;

<div id="myTable"></div>