Genera tabella HTML da array JavaScript 2D

Question

In JavaScript, è possibile generare una tabella HTML da un array 2D? La sintassi per la scrittura di tabelle HTML tende ad essere molto prolisso, quindi voglio generare una tabella HTML da una matrice 2D JavaScript, come mostrato:

[["row 1, cell 1", "row 1, cell 2"], 
["row 2, cell 1", "row 2, cell 2"]] 

sarebbe diventato:

<table border="1"> 
<tr> 
<td>row 1, cell 1</td> 
<td>row 1, cell 2</td> 
</tr> 
<tr> 
<td>row 2, cell 1</td> 
<td>row 2, cell 2</td> 
</tr> 
</table> 

Quindi sono cercando di scrivere una funzione JavaScript che restituirebbe una tabella da una matrice 2D JavaScript, come mostrato:

function getTable(array){ 
    //take a 2D JavaScript string array as input, and return an HTML table. 
} 

Answer 1

Ecco una funzione che utilizzerà la dom al posto della concatenazione di stringhe.

function createTable(tableData) { 
    var table = document.createElement('table'); 
    var tableBody = document.createElement('tbody'); 

    tableData.forEach(function(rowData) { 
    var row = document.createElement('tr'); 

    rowData.forEach(function(cellData) { 
     var cell = document.createElement('td'); 
     cell.appendChild(document.createTextNode(cellData)); 
     row.appendChild(cell); 
    }); 

    tableBody.appendChild(row); 
    }); 

    table.appendChild(tableBody); 
    document.body.appendChild(table); 
} 

createTable([["row 1, cell 1", "row 1, cell 2"], ["row 2, cell 1", "row 2, cell 2"]]); 

Answer 2

Questo è abbastanza facile da fare con un doppio ciclo for.

function makeTableHTML(myArray) { 
    var result = "<table border=1>"; 
    for(var i=0; i<myArray.length; i++) { 
     result += "<tr>"; 
     for(var j=0; j<myArray[i].length; j++){ 
      result += "<td>"+myArray[i][j]+"</td>"; 
     } 
     result += "</tr>"; 
    } 
    result += "</table>"; 

    return result; 
} 

Answer 3

Un'altra versione interna senza HTML.

function makeTable(array) { 
    var table = document.createElement('table'); 
    for (var i = 0; i < array.length; i++) { 
     var row = document.createElement('tr'); 
     for (var j = 0; j < array[i].length; j++) { 
      var cell = document.createElement('td'); 
      cell.textContent = array[i][j]; 
      row.appendChild(cell); 
     } 
     table.appendChild(row); 
    } 
    return table; 
} 

Answer 4

So che questa è una vecchia questione, ma per coloro indagando il web come me, ecco un'altra soluzione:

Usa replace() sulla virgole e creare un set di caratteri per determinare la fine di una riga . Ho appena aggiunto -- alla fine degli array interni. In questo modo non è necessario eseguire una funzione for.

Ecco un JSFiddle: https://jsfiddle.net/0rpb22pt/2/

In primo luogo, è necessario ottenere un tavolo all'interno del vostro HTML e dargli un id:

<table id="thisTable"><tr><td>Click me</td></tr></table> 

Ecco l'array modificato per questo metodo:

thisArray=[["row 1, cell 1__", "row 2, cell 2--"], ["row 2, cell 1__", "row 2, cell 2"]]; 

Si noti l'aggiunta -- alla fine di ogni matrice.

Perché hai anche le virgole all'interno di array, è necessario differenziare in qualche modo in modo da non finire per rovinare il tuo tavolo- aggiungendo __ dopo che le cellule (oltre l'ultima fila) funziona. Se non avevi virgole nella tua cella, questo passaggio non sarebbe comunque necessario.

Ora qui è la vostra funzione:

function tryit(){ 
    document 
    .getElementById("thisTable") 
    .innerHTML="<tr><td>"+String(thisArray) 
    .replace(/--,/g,"</td></tr><tr><td>") 
    .replace(/__,/g,"</td><td>"); 
} 

Funziona così:

1. Chiamate il vostro tavolo e arrivare a impostare il innerHTML. document.getElementById("thisTable").innerHTML
2. Inizia aggiungendo tag HTML per avviare una riga e dati. "<tr><td>"
3. Aggiungi thisArray come String(). +String(thisArray)
4. Sostituisci ogni -- che finisce prima di una nuova riga con la chiusura e l'apertura di dati e righe..replace(/--,/g,"</td></tr><tr><td>")
5. Altre virgole indicano i dati separati all'interno delle righe. Quindi sostituire tutte le virgole la chiusura e l'apertura dei dati. In questo caso non tutte le virgole sono tra le righe perché le celle hanno virgole, quindi abbiamo dovuto differenziare quelle con __: .replace(/__,/g,"</td><td>"). Normalmente devi semplicemente fare .replace(/,/g,"</td><td>").

Finché non vi dispiace aggiungere alcuni caratteri vaganti nel vostro array, richiede molto meno codice ed è semplice da implementare.

Answer 5

Se non ti dispiace jQuery, io sto usando this:

<table id="metaConfigTable"> 
    <caption>This is your target table</caption> 
    <tr> 
     <th>Key</th> 
     <th>Value</th> 
    </tr> 
</table> 

<script> 

    function tabelajzing(a){ 
    // takes (key, value) pairs from and array and returns 
    // corresponding html, i.e. [ [1,2], [3,4], [5,6] ] 
     return [ 
     "<tr>\n<th>", 
     a.map(function (e, i) { 
      return e.join("</th>\n<td>") 
     }).join("</td></tr>\n<tr>\n<th>"), 
     "</td>\n</tr>\n" 
     ].join("") 
    } 

    $('#metaConfigTable').find("tr").after(
     tabelajzing([ [1,2],[3,4],[5,6] ]) 
); 
</script> 

Answer 6

Una versione ES6 di risposta Daniel Williams':

function get_table(data) { 
    let result = ["<table border=1'>"]; 
    for(let row of data) { 
     result.push("<tr>"); 
     for(let cell of row){ 
      result.push(`<td>${cell}</td>`); 
     } 
     result.push("</tr>"); 
    } 
    result.push("</table>"); 
    return result.join('\n'); 
    } 

Answer 7

facile e veloce.

function createTable(tableData) { 
    var table = document.createElement('table'); 
    var row = {}; 
    var cell = {}; 

    tableData.forEach(function(rowData) { 
    row = table.insertRow(-1); // [-1] for last position in Safari 
    rowData.forEach(function(cellData) { 
     cell = row.insertCell(); 
     cell.textContent = cellData; 
    }); 
    }); 
    document.body.appendChild(table); 
} 

https://jsfiddle.net/6urdwdtf/1/