Question

我需要从数组生成一个js表。每个数组必须是表中的一列。我发现了一些从数组生成表的解决方案，但每个数组都成了一行。我还找到了一个转置它的功能。

现在我无法处理当数组是数组中的数组时：来自内部数组的valuse必须是子数，而不是一个大字符串。

在小提琴示例中：第二个表中的值2,5,6必须位于子行

中

function createTable(tableData, tableId) {
  var table = document.createElement('table');
  table.id = tableId;
  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);
}

https://codepen.io/t411tocreate/pen/GmmjKW

Answer 1

您可以在将数据放入单元格之前检查数据是否为数组，然后您可以为其创建另一个表。

检查这个

http://codepen.io/mastersmind/pen/XRRjRr

data1 = ['Text value1', 'Text value2', 'Text value3'];
data2 = [1, 2, 3];
data3 = ['another text value1', 'another text value2', 'another text value3'];

function createTable(tableData, tableId,counter) {
  var table = document.createElement('table');
  table.id = tableId;
  counter=counter?counter++:0;
  var tableBody = document.createElement('tbody');
  tableData.forEach(function(rowData) {
    var row = document.createElement('tr');
    rowData.forEach(function(cellData) {
      var cell = document.createElement('td');
      if(Array.isArray(cellData)){
      cellData = createTable([cellData], tableId,counter);
      cell.appendChild(cellData);
      }else{
        cell.appendChild(document.createTextNode(cellData));
      }
      row.appendChild(cell);
    });
    tableBody.appendChild(row);
  });
  table.appendChild(tableBody);
  document.body.appendChild(table);
  return table;
}
function log(msg){
  $('#log').append('<br>'+msg);
}
function transpose(tableId){
  $(tableId).each(function() {
    var $this = $(this);
    var newrows = [];
    $this.find("tr").each(function(){
      var i = 0;
      $(this).find("td").each(function(){
          i++;
          if(newrows[i] === undefined) { newrows[i] = $("<tr></tr>"); }
          newrows[i].append($(this));
      });
    });
    $this.find("tr").remove();
    $.each(newrows, function(){
        $this.append(this);
    });
  })
  return false;
}

createTable([data1, data2, data3], 'myTable')
transpose('#myTable');

dataWithSubArrays1 = ['Text value1', 'Text value2', 'Text value3'];
dataWithSubArrays2 = [1, [2, 5, 6], 3];
dataWithSubArrays3 = ['another text value1', 'another text value2', 'another text value3'];

createTable([dataWithSubArrays1, dataWithSubArrays2, dataWithSubArrays3], 'myTableSubArrays')
//transpose('#myTableSubArrays');

Javascript：使用子行生成表

1 个答案: