46

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.
}
4

16 に答える 16

71

文字列連結の代わりに 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"]]);
于 2013-03-01T19:01:16.107 に答える
40

これは、二重の 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;
}
于 2013-03-01T18:50:16.560 に答える
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');
  }
于 2016-10-01T05:58:11.073 に答える
4

テンプレート リテラルを使用したバージョンを次に示します。テンプレートリテラルから作成さ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) {

  // Destructure the headings (first row) from
  // all the rows
  const [headings, ...rows] = data;

  // Return some HTML that uses `getCells` to create
  // some headings, but also to create the rows
  // in the tbody.
  return `
    <table>
      <thead>${getCells(headings, 'th')}</thead>
      <tbody>${createBody(rows)}</tbody>
    </table>
  `;
}

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

于 2018-10-19T16:51:34.303 に答える
0

これは古い質問であることは承知していますが、私のようにウェブを熟読している人には、別の解決策があります。

カンマで使用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>");
}

それはこのように動作します：

  1. テーブルに電話して、 の設定に取り掛かりますinnerHTML。document.getElementById("thisTable").innerHTML
  2. 行とデータを開始する HTML タグを追加することから始めます。"<tr><td>"
  3. として追加thisArrayしString()ます。+String(thisArray)
  4. --新しい行の前で終わるeveryを、データと行の開始と終了に置き換えます。.replace(/--,/g,"</td></tr><tr><td>")
  5. その他のコンマは、行内の個別のデータを示します。したがって、すべてのカンマをデータの開始と終了に置き換えます。この場合、セルにコンマがあるため、すべての__コンマが行間にあるわけではないため、 :でそれらを区別する必要がありまし.replace(/__,/g,"</td><td>")た。通常は.replace(/,/g,"</td><td>").

迷子の文字を配列に追加することを気にしない限り、必要なコードが大幅に減り、実装が簡単になります。

于 2015-06-23T20:52:59.757 に答える
-1

jQueryを気にしない場合は、これを使用しています：

<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>
于 2015-10-02T13:19:42.097 に答える