web-dev-qa-db-fra.com

Générer un tableau HTML à partir d'un tableau 2D JavaScript

En JavaScript, est-il possible de générer un tableau HTML à partir d'un tableau 2D? La syntaxe utilisée pour écrire des tableaux HTML a tendance à être très détaillée. Je souhaite donc générer un tableau HTML à partir d'un tableau JavaScript 2D, comme indiqué:

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

deviendrait:

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

J'essaie donc d'écrire une fonction JavaScript qui renverrait une table à partir d'un tableau JavaScript 2D, comme indiqué:

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

Voici une fonction qui utilisera le dom au lieu de la concaténation de chaînes.

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"]]);
42
bmavity

C'est assez facile à faire avec un double pour la boucle.

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;
}
22
Daniel Williams

Une version es6 de la réponse de 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');
  }
4
cs01

Une autre version de innerHTML.

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;
}
3
Spiny Norman

Voir la démo fiddle pour créer une table à partir d’un tableau .

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

Vous pouvez l'utiliser comme ça

var tableData = [["r1c1", "r1c2"], ["r2c1", "r2c2"], ["r3c1", "r3c2"]];
createTable(tableData);
1
holmberd

Voici une version utilisant template literals . Il maps sur les données créant de nouveaux tableaux de chaînes construits à partir des littéraux de modèle, puis les ajoute au document avec insertAdjacentHTML :

let data = [
  ['Title', 'Artist', 'Duration', 'Created'],
  ['hello', 'me', '2', '2019'],
  ['ola', 'me', '3', '2018'],
  ['Bob', 'them', '4.3', '2006']
];

function getCells(data, type) {
  return data.map(cell => `<${type}>${cell}</${type}>`).join('');
}

function createBody(data) {
  return data.map(row => `<tr>${getCells(row, 'td')}</tr>`).join('');
}

function createTable(data) {
  const [headings, ...rows] = data;
  return `
    <table>
      <thead>${getCells(headings, 'th')}</thead>
      <tbody>${createBody(rows)}</tbody>
    </table>
  `;
}

document.body.insertAdjacentHTML('beforeend', createTable(data));
table { border-collapse: collapse; }
tr { border: 1px solid #dfdfdf; }
th, td { padding: 2px 5px 2px 5px;}

0
Andy

Si cela ne vous dérange pas jQuery, j'utilise 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>
0
Maciej Jankowski

C'est holmberd answer avec une implémentation "table header"

function createTable(tableData) {
  var table = document.createElement('table');
  var header = document.createElement("tr");
  // get first row to be header
  var headers = tableData[0];

  // create table header
  headers.forEach(function(rowHeader){
    var th = document.createElement("th");
    th.appendChild(document.createTextNode(rowHeader));
    header.appendChild(th);
  });      
  console.log(headers);

  // insert table header 
  table.append(header);
  var row = {};
  var cell = {};

  // remove first how - header
  tableData.shift();
  tableData.forEach(function(rowData, index) {
    row = table.insertRow();
    console.log("indice: " + index);
    rowData.forEach(function(cellData) {
      cell = row.insertCell();
            cell.textContent = cellData;
    });
  });
  document.body.appendChild(table);
}

createTable ([["" ligne 1, cellule 1 "," ligne 1, cellule 2 "], [" ligne 2, cellule 1 "," ligne 2, cellule 2 "], [" ligne 3, cellule 1 "," ligne 3, cellule 2 "]]);

0
jcom