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

Question

I have an array of arrays which contain HTML elements like <a> I would like to convert to a table but my problem is that HTML is displayed as raw text.

First I supposed it was a problem with hidden double quotes so I replace them with .replace()

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

But it looks like HTML is corretly formated in the Chrome DevTools DOM element :

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

Could you please tell me what should I do to display HTML elements in my table ?

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());

I use the code proposed by Bergi in this question : how to display array values inside <table> tag?

Thank you,

Answer 1

You can use the .innerHTML property to solve the issue of parsing the HTML, when there is HTML and injecting the plain text when there isn't.

Additionally, you can use the Array.forEach() method as an easier way to loop.

 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>".