Generowanie tabeli HTML z dwuwymiarowej tablicy JavaScript

Question

Czy w JavaScript możliwe jest wygenerowanie tabeli HTML z tablicy 2D? Składnia do pisania tabel HTML wydaje się być bardzo gadatliwy, więc chcę, aby wygenerować tabelę HTML z tablicy 2D JavaScript, jak pokazano:

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

staną:

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

więc jestem starając się napisać funkcję JavaScript, która zwróci tablicę z tablicy 2D JavaScript, jak pokazano:

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

Answer 1

Oto funkcja, która użyje dom zamiast konkatenacji ciągów.

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

jest to dość łatwe do czynienia z podwójnym pętli 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

Kolejna wersja bez wersji wewnętrznej.

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

wiem, jest to stara sprawa, ale dla tych, przeglądania stron internetowych, jak ja, tutaj jest inne rozwiązanie:

Zastosowanie replace() na przecinki i stworzyć zestaw znaków do określenia końca wiersza . Dodaję tylko -- do końca wewnętrznych tablic. W ten sposób nie trzeba uruchamiać funkcji for.

Oto JSFiddle: https://jsfiddle.net/0rpb22pt/2/

Po pierwsze, trzeba się dostać stolik wewnątrz kodu HTML i nadać mu ID:

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

Oto Twoja tablica edytowana dla tej metody:

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

Zauważ dodany -- na końcu każdej tablicy.

Ponieważ masz również przecinkami wewnątrz tablic, trzeba odróżnić je jakoś tak nie skończyć brudząc swój Tabeli-dodanie __ po komórek (poza ostatnim w rzędzie) działa. Jeśli nie masz przecinków w komórce, ten krok nie będzie konieczny.

Teraz tutaj jest twoja funkcja:

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

To działa tak:

1. Zadzwoń do swojego stolika i dostać się do ustawiania innerHTML. document.getElementById("thisTable").innerHTML
2. Rozpocznij od dodania znaczników HTML, aby rozpocząć wiersz i dane. "<tr><td>"
3. Dodaj thisArray jako String(). +String(thisArray)
4. Wymień co --, który kończy się przed nowym wierszem z zamknięciem i otwarciem danych i wiersza..replace(/--,/g,"</td></tr><tr><td>")
5. Pozostałe przecinki oznaczają oddzielne dane w ciągu wierszy. Zastąp wszystkie przecinki zamknięciem i otwarciem danych. W tym przypadku nie są przecinane między wierszami, ponieważ komórki mają przecinki, więc musieliśmy rozróżnić je z __: .replace(/__,/g,"</td><td>"). Zwykle po prostu robisz .replace(/,/g,"</td><td>").

Dopóki nie masz nic przeciwko dodawaniu do twojej tablicy niektórych zabłąkanych znaków, zajmuje to znacznie mniej kodu i jest proste w implementacji.

Answer 5

Jeśli nie przeszkadza jQuery, używam 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

wersja ES6 odpowiedzi Daniela Williamsa:

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

szybkie i łatwe.

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/