javascript - 如何使用数组值作为函数参数的变量名以在 JavaScript 中从数组创建表？

Question

我想创建一些数据来自数组的表。 (每个表都有自己的数组)。另外我还有另一个数组，其中包含表数据数组的名称和一些其他值。

据我所知，问题出在 table(x[1],sub) 因为 x[1] 不充当变量(名称)但它的值充当字符串。

在 PHP 中，我会编写某事。像 $$x[1] 但如何在 JavaScript 中执行？

var xxx = [[ 'Adam'    , 'table1' ],
           [ 'Ben'     , 'table2' ],
           [ 'Charlie' , 'table3' ]];

// arrays for table data

var table1 = [[ 'a' , '1' ],
              [ 'b' , '2' ],
              [ 'c' , '3' ],
              [ 'd' , '4' ],
              [ 'e' , '5' ]];
              
var table2 = [[ 'a' , '1' ],
              [ 'b' , '2' ],
              [ 'c' , '3' ],
              [ 'd' , '4' ],
              [ 'e' , '5' ]];
              
var table3 = [[ 'a' , '1' ],
              [ 'b' , '2' ],
              [ 'c' , '3' ],
              [ 'd' , '4' ]],


// function to create table

function table(tableData,sub) {
  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);
  
  sub ? sub.appendChild(table) : document.body.appendChild(table);

}

// apply everything to HTML

xxx.forEach( x => {

  var con = document.querySelector('#content');
  var sub = document.createElement('div');
 
  con.appendChild(sub);
  
  var h = document.createElement('h3');
  h.innerHTML = x[0];
  
  sub.appendChild(h3);
  table(x[1],sub);      // x[1] is the problem I guess

});

<div id="myID">
  <h2>Headline</h2>
  <div id="content">
  
  </div>
</div>

Answer 1

您可以获取一个对象，其中包含对具有名称的所需表的引用。

reference = { table1, table2, table3 }

function table(tableData, sub) {
    var table = document.createElement('table'),
        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);
    (sub || document.body).appendChild(table);
}

var xxx = [['Adam', 'table1'], ['Ben', 'table2'], ['Charlie', 'table3']],
    table1 = [['a', '1'], ['b', '2'], ['c', '3'], ['d', '4'], ['e', '5']],
    table2 = [['a', '1'], ['b', '2'], ['c', '3'], ['d', '4'], ['e', '5']],
    table3 = [['a', '1'], ['b', '2'], ['c', '3'], ['d', '4']],
    reference = { table1, table2, table3 }; // refernce 

xxx.forEach(x => {
    var con = document.querySelector('#content'),
        sub = document.createElement('div'),
        h = document.createElement('h3');

    con.appendChild(sub);
    h.innerHTML = x[0];
    sub.appendChild(h);          // use h insead of h3
    table(reference[x[1]], sub); // reference
});

<div id="myID">
  <h2>Headline</h2>
  <div id="content"></div>
</div>