Drucktischelemente mit Hilfe von Javascript

Question

I einen JavaScript-Array haben, die ein string enthält, die im Format <td>200</td><td>I3</td><td>NAME NAME</td><td>EXTRA</td>

Beispiel Array [0] enthält <td>200</td><td>I3</td><td>NAME NAME</td><td>EXTRA</td>
die eine Zeichenfolge ist (und so weiter)

Wie drucke ich eine HTML-Tabelle, während ich durch das Array iteriere?

Answer 1

könnten Sie verwenden:

var html = '<table><tr>' + myarray.join('</tr><tr>') + '</tr></table>'; 

Zum Beispiel:

myarray = [ 
 
    '<td>200</td><td>I3</td><td>NAME NAME</td><td>EXTRA</td>', 
 
    '<td>150</td><td>I1</td><td>Some data</td><td>-999</td>', 
 
    '<td>360</td><td>K9</td><td>other data</td><td>nothing</td>', 
 
]; 
 

 
var html = '<table border=1><tr>' + myarray.join('</tr><tr>') + '</tr></table>'; 
 

 
document.querySelector('#mytablemustcomehere').innerHTML = html;

<div id="mytablemustcomehere"></div>

Answer 2

Sie können Schleife durch Ihre Array-Elemente und fügen Sie <tr> für jede Zeile zu ihnen.

var arr = ["<td>200</td><td>I3</td><td>NAME NAME 1</td><td>EXTRA 1</td>", 
 
      "<td>100</td><td>I2</td><td>NAME NAME 2</td><td>EXTRA 2</td>"]; 
 

 
var str = ""; 
 

 
var table = document.getElementById("myTable"); 
 

 
for(var i = 0; i < arr.length; i++) str += "<tr>"+arr[i]+"</tr>"; 
 

 
table.innerHTML = str;

<table id="myTable"></table>

Answer 3

@ Antwort des Trincot ist für die spezifische Frage am besten. Ich möchte ein wenig darüber hinaus, wie dies mit der DOM-API zu tun.

function createRowHTML(itemData) { 
    return '<tr><td>' + itemData.join('</td><td>') + '</td></tr>'; 
} 

function appendTableTo(element, items) { 
    var table = document.createElement('table'); 
    table.innerHTML = items.map(createRowHTML).join(''); 
    element.appendChild(table); 
} 

var items = [ 
    [200, 'I3', 'NAME NAME 1', 'EXTRA 1'], 
    [100, 'I2', 'NAME NAME 2', 'EXTRA 2'] 
]; 

appendTableTo(document.querySelector('body'), items);