发布使用JS函数和数组构建表

Question

我正在尝试构建并显示基于数组的表。我周围搜索了一段时间，似乎无法找到答案，为什么我的代码不工作。

这是一个简单的函数调用，通过函数参数传入一个数组，但由于某种原因它出现未定义，因为它看起来数组不能传递给函数参数。

我的代码基本概况如下：

<div id="myDiv"></div> 

    <script> 

    function myFunction(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); 
    }; 

    var array1 = {key1:"value1",key2:"value2",key3:"value3"}; 

    document.getElementById("myDiv").innerHTML = myFunction(array1); 

    </script> 

编辑：这一个就解决了。谢谢评论！

Answer 1

你正在尝试与这条线

document.getElementById("myDiv").innerHTML = myFunction(array1); 

我不能找到您的功能，设置div的内部HTML任何回报的事情。

var array1 = {key1:"value1",key2:"value2",key3:"value3"}; 

和你的数组是一个对象。

先试着解决这些问题。

尝试这样做..

<script> 

    function myFunction(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); 

     return table; 
    }; 

    </script> 

Answer 2

这样做

for(var i in array1) { 
    console.log(i); //this will print key1, key2... 
    console.log(array1[i]); //this will print value1, value2... 
} 

你得到的错误是因为你的数据是一个JavaScript对象，而不是一个JavaScript数组。所以forEach不会工作。

Answer 3

基本上，你需要

• 用于数据的数组，
• 收益表，
• 使用appendChild，用于获取分配到div表，因为你与DOM元素工作而不使用字符串（字符串与innerHTML一起使用）。

function myFunction(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); 
 
    return table; 
 
} 
 

 
var array1 = [["value1", "value2", "value3"], ["value4", "value5", "value6"], ["value7", "value8", "value9"]]; 
 

 
document.getElementById("myDiv").appendChild(myFunction(array1));

<div id="myDiv"></div>