テーブルを作ってJavaScriptを使ってコンテンツを作る

Question

左から右へ、上から下へと表のセルにarrコンテンツをダウンロードするにはHw？私のコードで何が間違っていますか？どのように問題を解決するには？前もって感謝します。

<button onclick="myFunction()></button> 
<table id="myTable" border='1px'> 
     <tr> 
      <th>N</th> 
      <th>Name</th> 
      <th>Surname</th> 
      <th>tel.</th> 
      <th>email</th> 
     </tr> 
    </table>  


    var arr=[[1,2,3,4,'a'],[5,6,7,8,'b'],[9,10,11,12,'c']]; 
function myFunction() { 
    createTable(); 
    } 

    function createTable(){ 
     var i,j; 
     var table = document.getElementById("myTable"); 
     for(i=0; i<arr.length; i++) { 
      var row = table.insertRow(1); 
      for(j=0,k=0; j<5, k<arr[i].length;j++, k++) { 
      var cell = row.insertCell(0); 
       cell.innerHTML = arr[i][k]; 
     } 

    } 
} 

Answer 1

あなたのデータ構造はわかりませんが、あなたのデータは次の形式で取得します。

[ { N: 1, Name: 2, Surname: 3, Tel: 4, email: 'a' }, 
    { N: 5, Name: 6, Surname: 7, Tel: 8, email: 'b' }, 
    { N: 9, Name: 10, Surname: 11, Tel: 12, email: 'c' } ] 

次のtableMaker機能を使用できます。 （2番目の引数がtrueとして提供されている場合）ヘッダーとしてのプロパティとHTMLテキストを生成するための対応するセルとしての値を取ります。だからここでそれは次のようになる。

var tableMaker = (o,h) => {var keys = o.length && 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 rows.length ? "<table>" + rows + "</table>" : ""; 
 
          }, 
 
      arr = [[1,2,3,4,'a'],[5,6,7,8,'b'],[9,10,11,12,'c']], 
 
     tableObj = arr.map(e => ({N: e[0], Name: e[1], Surname : e[2], Tel: e[3], email: e[4]})), 
 
    tableHTML = tableMaker(tableObj,true); 
 
document.write(tableHTML);