如何将包含HTML元素的数组转换为Javascript中的表格？

我有一个包含HTML元素的数组的数组，如<a>我想转换为表，但我的问题是，HTML显示为原始文本。如何将包含HTML元素的数组转换为Javascript中的表格？

首先，我认为这是隐藏双引号中的问题，所以我用.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提出代码：

来源

2017-04-15 Florent

的'.createTextNode（）'方法不正是它的名字所暗示的：它使一个**文本节点**。这就是浏览器忽略HTML标记的原因。 – Pointy

...或设置'cell.innerHTML'。 – Pointy

标题也有点不正确，因为我只看到一个String [] []数组。任何数组中都没有HTML人 –

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>

来源

2017-04-15 17:29:14

感谢您提供'Array.forEach（）'提示，更优雅。 – Florent

@Florent不客气。是的，它允许我们在这种情况下完全删除索引。 –

有没有可能用'insertRow（）'来指定它是插入'tr'的'td'还是'th'？找不到我可以如何声明第一个数组索引作为表头。编辑哦，我看到有'createTHead（）'！ – Florent

简化整个代码：

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

来源

2017-04-15 17:33:27

@ScottMarcus加入？ –

如何将包含HTML元素的数组转换为Javascript中的表格？

回答

相关问题