Question

我是编码和社区的新手，我真的寻找我想要的答案，但没有发现这个具体的。所以这里：

我有一个像这样的数组：

var arr = new Array();
arr[0]={col1:"john",col2:"is",col3:"a", col4:"fool"};
arr[1]={col1:"paul",col2:"is",col3:"a", col4:"fool"};
arr[2]={col1:"luke",col2:"is",col3:"a", col4:"fool"};

和已存在的HTML表格：

<body>
<Table>

 <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>

 <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>

 <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
 </tr>

</Table>

</body>

我

function fillTable();

var tr,td,row,tn,col;

  for(var row=0;row=arr.length;row++){
    tr=document.getElementsByTagName("tr")[i];
    for(var col=0;col=arr[row].length;col++){
        document.getElementsByTagName("td").innerHTML = arr[row].col;

    }
  }

我尝试过很多方法，比如changeNodeValue，或者创建一个全新的表但显然我错过了一些东西所以我问你们。在此先感谢您的帮助

Answer 1

在您的方法中，您选择了arr[row].col，它不会返回任何内容，因为col不是关键字。因此，要么必须在其中使用另一个数组，要么使用Object.keys(arr[row])

遍历对象的键

但是我建议不要使用预定义的table，而是保持附加你想要的组件 - 使用jQuery - 它将最大限度地减少可能的错误。

var arr = new Array();
arr[0] = {
  col1: "john",
  col2: "is",
  col3: "a",
  col4: "fool"
};
arr[1] = {
  col1: "paul",
  col2: "is",
  col3: "a",
  col4: "fool"
};
arr[2] = {
  col1: "luke",
  col2: "is",
  col3: "a",
  col4: "fool"
};



function fillTable() {

  var tr, td, row, tn, col;
  for (var row = 0; row < arr.length; row++) {
    tr = document.getElementsByTagName("tr")[row];
    var len = Object.keys(arr[row]).length;
    for (var col = 0; col < len; col++) {
      var key = Object.keys(arr[row])[col];
      document.getElementsByTagName("td")[col + (row * len)].innerHTML = arr[row][key];
    }
  }
}

fillTable();

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>

</table>

Answer 2

我想建议jquery.dataTables：

＆＃13;

        $(document).ready(function () {
            var arr = [
            { col1: "john", col2: "is", col3: "a", col4: "fool" },
            { col1: "paul", col2: "is", col3: "a", col4: "fool" },
            { col1: "luke", col2: "is", col3: "a", col4: "fool" }];
            $('#table').DataTable({
                data: arr,
                columns: [
                    { data: 'col1' },
                    { data: 'col2' },
                    { data: 'col3' },
                    { data: 'col4' },
                ]
            });
        });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.css" rel="stylesheet"/>
<table id="table"></table>

＆＃13;

Answer 3

var tr,td,row,tn,col;

for(var row=0;row=arr.length;row++){
    //Here i is not defined
    //tr=document.getElementsByTagName("tr")[i];

    tr=document.getElementsByTagName("tr")[row];

    //object does not have length
    //for(var col=0;col=arr[row].length;col++){

    // Loop through the number of keys in your object
    for(var col=0;col=Object.keys(arr[row]).length;col++){
        // Here arr[row].cal is not a part of your object
        //document.getElementsByTagName("td").innerHTML = arr[row].col;

        document.getElementsByTagName("td")[col].innerHTML = arr[row]['col' + (col + 1)];
    }
}

Answer 4

function fillTable(){

    var tr,td,row,tn,col;

    for(var row=0;row=arr.length;row++){
        var tr=document.getElementsByTagName("tr")[i];
        var col = 0; 
        for(var i in arr[row]){                               
            tr.cells[col].innerHTML = arr[row][i];
            col++;
        }
    }
}

Answer 5

假设

数据集是预先知道的
数据集不会在以后更改

我会做类似下面的事情。请注意，这是一个纯粹的JavaScript解决方案。

首先为所有行分配一个类。这样可以很容易地在你的脚本中选择它们。

<script type="text/javascript">
    var arr = new Array();
    arr[0]={col1:"john",col2:"is",col3:"a", col4:"fool"};
    arr[1]={col1:"paul",col2:"is",col3:"a", col4:"fool"};
    arr[2]={col1:"luke",col2:"is",col3:"a", col4:"fool"};

    //extract the table rows
    var rows = document.getElementsByClassName('rows');

    //iterate through the rows collection
    for(i = 0; i < rows.length; i++){
        //extracts the cols collection in each row.
        var cols = rows[i].getElementsByTagName('td');

        //assign the desired values. you could do this iteratively as well
        cols[0].innerHTML = arr[i].col1;
        cols[1].innerHTML = arr[i].col2;
        cols[2].innerHTML = arr[i].col3;
        cols[3].innerHTML = arr[i].col4;
    }
</script>

顺便说一下，如果“约翰”，“保罗”或“卢克”看到这个帖子，他们会非常生气你知道吗？ ;）

使用带有对象

5 个答案: