Question

在JavaScript中，是否可以从2D数组生成HTML表？编写HTML表的语法往往非常冗长，所以我想从2D JavaScript数组生成一个HTML表，如下所示：

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

会变成：

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

所以我正在尝试编写一个可以从2D JavaScript数组返回表的JavaScript函数，如下所示：

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

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

Answer 2

这对于双循环来说非常容易。

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

另一个innerHTML-less版本。

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

Daniel Williams回答的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');
  }

Answer 5

请参阅the fiddle demo to create a table from an array。

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

Answer 6

使用es6 reduce的单线纸

import java.awt.BorderLayout;
import java.awt.GridLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JPasswordField;
import javax.swing.JTextField;
import javax.swing.SwingUtilities;

public class UserLoginPage implements ActionListener {
    // Put all JLabels,Frames and buttons here etc
    private JPanel panel;
    private JFrame frame;
    private JLabel userLabel;
    private JLabel passwordLabel;
    private JTextField userText;
    private JTextField passwordText;
    private JButton loginButton;

    // Label for successful login
    private JLabel success;

    // Default Constructor to add the frames and panels etc
    public UserLoginPage() {
        
    }
    
    private void createAndShowGUI() {
        frame = new JFrame(getClass().getSimpleName());
        panel  = new JPanel();
        
        panel.setLayout(new GridLayout(0, 2));
        
        userLabel = new JLabel("Username");
        passwordLabel = new JLabel("Password");
        
        userText = new JTextField(10);
        passwordText = new JPasswordField(10);
        
        loginButton = new JButton("Login");
        success = new JLabel("Login Successful");
        
        loginButton.addActionListener(this);
        
        panel.add(userLabel);
        panel.add(userText);
        panel.add(passwordLabel);
        panel.add(passwordText);
        panel.add(loginButton);
        
        frame.add(panel);
        frame.add(success, BorderLayout.SOUTH);
        frame.pack();
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setVisible(true);
    }

    public static void main(String[] args) {
        SwingUtilities.invokeLater(new Runnable() {
            @Override
            public void run() {
                new UserLoginPage().createAndShowGUI();;
            }
        });
    }

    @Override
    public void actionPerformed(ActionEvent e) {
        System.out.println("Button Clicked");
    }
}

Answer 7

我知道这是一个老问题，但对于那些像我一样阅读网络的人来说，这是另一个解决方案：

在逗号上使用replace()并创建一组字符以确定行的结尾。我只是将--添加到内部数组的末尾。这样您就不必运行for功能。

这是一个JSFiddle：https://jsfiddle.net/0rpb22pt/2/

首先，你必须在你的HTML中找到一个表并给它一个id：

<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>")。

只要您不介意在阵列中添加一些杂散字符，它就会占用更少的代码并且易于实现。

Answer 8

如果你不介意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>

Answer 9

这是带有“表头”实现的简单答案

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”]]）;

Answer 10

这是使用template literals的版本。 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;}

Answer 11

这里是一个示例，说明如何在JavaScript中从矩阵m x n ...生成和读取数据

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

Answer 12

基于公认的解决方案：

figcaption

通过简单的更改就可以将表作为HTML元素返回。

Answer 13

生成表并支持HTML作为输入。

灵感来自@ spiny-norman https://stackoverflow.com/a/15164796/2326672

@bornd https://stackoverflow.com/a/6234804/2326672

function escapeHtml(unsafe) {
    return String(unsafe)
         .replace(/&/g, "&amp;")
         .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;
}

Test here with JSFIDDLE - Paste directly from Microsoft Excel to get table

Answer 14

没有换行的纯功能表（只是为了好玩）

const pureFunctionalTable = data => 
    [document.createElement('table')].filter(table => !table.appendChild(
        data.reduce((tbody, row) =>
            !tbody.appendChild(row.reduce((tr, cell) =>
                !tr.appendChild(document.createElement('td'))
                   .appendChild(document.createTextNode(cell)) || tr
                , document.createElement('tr'))
            ) || tbody, document.createElement('tbody'))) || table)[0];

用法

document.body.appendChild(pureFunctionalTable([
    ['row 1, cell 1', 'row 1, cell 2'],
    ['row 2, cell 1', 'row 2, cell 2']
]));

Answer 15

我的 10cent 以 ar 为数组：

'<table><tr>'+ar.map(e=>'<td>'+e.join('</td><td>')+'</td>').join('</tr><tr>')+'</tr></table>'

从2D JavaScript数组生成HTML表

15 个答案: