Создание таблицы HTML из 2D-массива JavaScript

Ответ 1

Здесь функция, которая будет использовать dom вместо конкатенации строк.

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

Ответ 2

Это довольно легко сделать с циклом double 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;
}

Ответ 3

Другая версия 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;
}

Ответ 4

Версия es6 ответа Дэниела Уильямса:

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

Ответ 5

Посмотрите демонстрацию fiddle, чтобы создать таблицу из массива.

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

Вы можете использовать это так

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

Ответ 6

Я знаю, что это старый вопрос, но для тех, кто просматривает такие сети, как я, здесь другое решение:

Используйте replace() в запятых и создайте набор символов, чтобы определить конец строки. Я просто добавляю -- к концу внутренних массивов. Таким образом, вам не нужно запускать функцию for.

Здесь JSFiddle: https://jsfiddle.net/0rpb22pt/2/

Во-первых, вы должны получить таблицу внутри своего HTML и присвоить ей идентификатор:

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

Здесь ваш массив отредактирован для этого метода:

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

Обратите внимание на добавленный -- в конце каждого массива.

Поскольку у вас также есть запятые внутри массивов, вы должны их каким-то образом различать, чтобы не повредить ваш стол, добавив __ после того, как ячейки (кроме последнего в строке) будут работать. Если у вас не было запятых в вашей камере, этот шаг не понадобился бы.

Теперь вот ваша функция:

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

Он работает следующим образом:

• Позвоните в таблицу и перейдите к настройке innerHTML. document.getElementById("thisTable").innerHTML
• Начните с добавления тегов HTML, чтобы начать строку и данные. "<tr><td>"
• Добавьте thisArray в качестве String(). +String(thisArray)
• Заменить каждый --, который заканчивается перед новой строкой с закрытием и открытием данных и строки. .replace(/--,/g,"</td></tr><tr><td>")
• Другие запятые означают отдельные данные в строках. Поэтому замените все запятые на закрытие и открытие данных. В этом случае не все запятые находятся между строками, потому что ячейки имеют запятые, поэтому нам пришлось различать те, у которых __: .replace(/__,/g,"</td><td>"). Обычно вы просто делаете .replace(/,/g,"</td><td>").

До тех пор, пока вы не возражаете добавлять в свой массив несколько бродячих символов, он занимает намного меньше кода и прост в реализации.

Ответ 7

Если вы не против jQuery, я использую 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>

Ответ 8

Это holmberd ответ с реализацией "заголовок таблицы"

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 ([["строка 1, ячейка 1", "строка 1, ячейка 2"], ["строка 2, ячейка 1", "строка 2, ячейка 2"], ["строка 3, ячейка 1", "строка 3, ячейка 2 "]]);

Ответ 9

Здесь версия с использованием шаблонных литералов. Он maps данные, создавая новые массивы строк, построенных из литералов шаблона, а затем добавляет их в документ с помощью 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;}

Ответ 10

Вот пример того, как вы можете генерировать и читать данные из матрицы mx n... в JavaScript

let createMatrix = (m, n) => {
      let [row, column] = [[], []],
          rowColumn = m * n
      for (let i = 1; i <= rowColumn; i++) {
        column.push(i)
        if (i % n === 0) {
          row.push(column)
          column = []
        }
      }
      return row
    }

let setColorForEachElement = (matrix, colors) => {
  let row = matrix.map(row => {
    let column = row.map((column, key) => {
      return { number: column, color: colors[key] }
    })
    return column
  })
  return row
} 

const colors = ['red', 'green', 'blue', 'purple', 'brown', 'yellow', 'orange', 'grey']
const matrix = createMatrix(6, 8)
const colorApi = setColorForEachElement(matrix, colors)

let table ='<table>'
colorApi.forEach(row => {
  table+= '<tr>'
    row.forEach(column =>  table += '<td style='background: ${column.color};'>${column.number}<td>' )
  table+='</tr>'
})
table+= '</table>'
document.write(table);

Ответ 11

На основании принятого решения:

function createTable (tableData) {
  const table = document.createElement('table').appendChild(
    tableData.reduce((tbody, rowData) => {
      tbody.appendChild(
        rowData.reduce((tr, cellData) => {
          tr.appendChild(
            document
              .createElement('td')
              .appendChild(document.createTextNode(cellData))
          )
          return tr
        }, document.createElement('tr'))
      )
      return tbody
    }, document.createElement('tbody'))
  )

  document.body.appendChild(table)
}

createTable([
  ['row 1, cell 1', 'row 1, cell 2'],
  ['row 2, cell 1', 'row 2, cell 2']
])

С помощью простого изменения можно вернуть таблицу как элемент HTML.

Ответ 12

Генерация таблицы и поддержка HTML в качестве входных данных.

Вдохновлено @spiny-norman fooobar.com/info/307967/...

И @bornd fooobar.com/info/74326/...

function escapeHtml(unsafe) {
    return String(unsafe)
         .replace(/&/g, "&")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
 }

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++){
            k = escapeHtml((myArray[i][j]));
            result += "<td>"+k+"</td>";
        }
        result += "</tr>";
    }
    result += "</table>";

    return result;
}

Протестируйте здесь с JSFIDDLE - Вставьте прямо из Microsoft Excel, чтобы получить таблицу