如何將包含HTML元素的數組轉換爲Javascript中的表格？

Question

我有一個包含HTML元素的數組的數組，如<a>我想轉換爲表，但我的問題是，HTML顯示爲原始文本。

首先，我認爲這是隱藏雙引號中的問題，所以我用.replace()

cell.appendChild(document.createTextNode(x[i][j].replace(/"/g, ""))); 

取代他們，但它看起來像HTML是在Chrome DevTools DOM元素corretly格式化：

<td><a href='http://website.org/prod4'>Product4</a></td> 

你能告訴我該怎麼做才能在我的表格中顯示HTML元素？

JSFiddle

var orderArray = [ 
    ["1", "29-Aug-2012", "Product1", "client1"], 
    ["2", "29-Aug-2012", "Product2", "client2"], 
    ["3", "29-Aug-2012", "Product3", "client3"], 
    ["4", "29-Aug-2012", "<a href='http://website.org/prod/'>Product4</a>", "client4"], 
    ["5", "29-Aug-2012", "Product5", "client5"] 
    ]; 

function display() { 
    // get handle on div 
    var table = document.createElement("table"); 
    for (var i = 0; i < orderArray.length; i++) { 
     var row = table.insertRow(); 
     for (var j = 0; j < orderArray[i].length; j++) { 
      var cell = row.insertCell(); 
      cell.appendChild(document.createTextNode(orderArray[i][j])); 
     } 
    } 
    return table; 
} 
var container = document.getElementById('container'); 
container.appendChild(display()); 

我用這個問題由BERGI提出代碼：

Answer 1

how to display array values inside <table> tag?

謝謝你，你可以使用.innerHTML屬性來解決解析的問題HTML，當存在HTML時，在沒有時注入純文本。

此外，您可以使用Array.forEach()方法作爲循環的更簡單的方法。

var orderArray = [ 
 
    ["1", "29-Aug-2012", "Product1", "client1"], 
 
    ["2", "29-Aug-2012", "Product2", "client2"], 
 
    ["3", "29-Aug-2012", "Product3", "client3"], 
 
    ["4", "29-Aug-2012", "<a href='http://website.org/prod4'>Product4</a>", "client4"], 
 
    ["5", "29-Aug-2012", "Product5", "client5"] 
 
]; 
 

 
function display() { 
 
    // get handle on div 
 
    var container = document.getElementById('container'); 
 
    
 
    var table = document.createElement("table"); 
 
    
 
    // Arrays support a forEach method that accepts a callback function 
 
    // to be executed on each item of the array. This function is automatically 
 
    // passed 3 arguments: the current array element, the current index and the array itself. 
 
    // We only need to capture the reference to the array element (value and innerValue in 
 
    // this example). 
 
    orderArray.forEach(function(value) { 
 
     var row = table.insertRow(); 
 
     
 
     value.forEach(function(innerValue) { 
 
      var cell = row.insertCell(); 
 
      cell.innerHTML = innerValue; 
 
     }); 
 
    }); 
 
    
 
    return table; 
 
} 
 

 
container.appendChild(display());

td { padding:5px; }

<div id="container"></div>

Answer 2

簡化整個代碼：

container.innerHTML="<table>"+(orderArray.map(row=>"<tr><td>"+row.join("</td><td>")+"</td></tr>").join(""))+"</table>".