Javascript：從2個陣列構建html表格

由於幾個小時我試圖找到最好的方法來從兩個JavaScript數組中構建我的html <table>的tbody部分。Javascript：從2個陣列構建html表格

注意：我可能不會使用Jquery。

我的數組包含2個兒童陣列：

var arParent = [ 
    ["col1a", "col1b", "col1c"], 
    ["col2a", "col2b", "col2c"] 
]

，我需要這樣的：

<tr> 
    <td>col1a</td> 
    <td>col2a</td> 
</tr> 
<tr> 
    <td>col1b</td> 
    <td>col2b</td> 
</tr> 
<tr> 
    <td>col1c</td> 
    <td>col2c</td> 
</tr>

來源

2016-05-21 zm455

您可以第一行轉換爲列，然後只需添加到table

var ar = [ 
 
    ["col1a", "col1b", "col1c"], 
 
    ["col2a", "col2b", "col2c"] 
 
], table = document.querySelector('table tbody'); 
 

 
//Convert rows to columns 
 
var r = ar[0].map(function(col, i) { 
 
    return ar.map(function(row) { 
 
    return row[i]; 
 
    }); 
 
}); 
 

 
//Add data to table 
 
r.forEach(function(e) { 
 
    table.innerHTML += '<tr><td>' + e[0] + '</td><td>' + e[1] + '</td></tr>' 
 
})

<table> 
 
    <tbody></tbody> 
 
</table>

來源

2016-05-21 14:04:42

您的解決方案是我所需要的。您的代碼簡短而強大。我太喜歡它了。謝謝。 – zm455

我把這個在你的身體元素。遍歷數組中的每一行，然後遍歷每一列中的每一行並逐一添加。

- >請注意，行數取決於您的第一個數組元素所具有的行數。

<body> 
     <style> 
      table, tr, td { 
       border: solid 1px; 
      } 
     </style> 
     <script> 
     (function() { 

     var arParent = [ 
      ["col1a", "col1b", "col1c"], 
      ["col2a", "col2b", "col2c"] 
     ]; 

     var table = document.createElement("table"); 

     for (i = 0; i < arParent[0].length; i++) { 
      var row = document.createElement("tr"); 
      for (j = 0; j < arParent.length; j++) { 
       var column = document.createElement("td"); 
       var content = document.createTextNode(arParent[j][i]); 
       column.appendChild(content); 
       row.appendChild(column); 
      } 
      table.appendChild(row); 
     } 

     document.body.appendChild(table); 
     })(); 
    </script> 
<body>

來源

2016-05-21 13:55:38 Fuzzzzel

我會先改變這個非表格數據等成行。然後以正常方式渲染這些行。

機智：

var arParent = [ 
 
    ["col1a", "col1b", "col1c", "<b>&amp;</b>"], 
 
    ["col2a", "col2b", "col2c", "<a href='http://google.com'>googles</a>"] 
 
] 
 

 

 
function transformData(arr) { 
 
    // transform columns into rows 
 
    var rows = []; 
 
    for (var i = 0, iLen = arr.length; i < iLen; i++) { 
 
    var cols = arr[i]; 
 
    for (var j = 0, jLen = cols.length; j < jLen; j++) { 
 
     var row; 
 
     if (i === 0) { 
 
     row = { 
 
      columns: [] 
 
     }; 
 
     rows.push(row); 
 
     } else { 
 
     row = rows[j]; 
 
     } 
 
     var col = cols[j]; 
 
     row.columns.push(col); 
 
    } 
 
    } 
 
    return rows; 
 
} 
 

 
// from http://stackoverflow.com/questions/1219860/html-encoding-in-javascript-jquery 
 
function htmlEscape(str) { 
 
    return String(str) 
 
     .replace(/&/g, '&amp;') 
 
     .replace(/"/g, '&quot;') 
 
     .replace(/'/g, '&#39;') 
 
     .replace(/</g, '&lt;') 
 
     .replace(/>/g, '&gt;'); 
 
} 
 

 
function renderTableData(rows) { 
 
    var html = []; 
 
    for (var r = 0, rLen = rows.length; r < rLen; r++) { 
 
    var row = rows[r]; 
 
    html.push("<tr>"); 
 
    for (var c = 0, cLen = row.columns.length; c < cLen; c++) { 
 
     var col = row.columns[c]; 
 
     html.push("<td>"); 
 
     html.push(htmlEscape(col)); 
 
     html.push("</td>"); 
 
    } 
 
    html.push("</tr>"); 
 
    } 
 
    var tbody = document.getElementById('tabledata'); 
 
    tbody.innerHTML = html.join(''); 
 
} 
 

 
var rows = transformData(arParent); 
 

 
console.log(JSON.stringify(rows)); 
 

 
renderTableData(rows);

td { 
 
    padding: 2px 4px; 
 
    font-family: "Segoe UI", Arial, sans-serif; 
 
    border: 1px solid #ccc; 
 
}

<table> 
 
    <tbody id='tabledata'> 
 
    </tbody> 
 
</table>

可以簡明得多寫這篇文章，但我故意把它弄壞了成小的簡單語句，這樣你可以希望跟着和理解程序。

來源

2016-05-21 14:06:49 nothingisnecessary

Javascript：從2個陣列構建html表格

回答

相關問題