主页 / 问题 / 1184637
Accepted
Dip
Asked:2020-10-01 11:59:04 +0000 UTC2020-10-01 11:59:04 +0000 UTC

如何显示列数和行数未知的表格？

  • 772

通过一个简单的 get 请求，我得到了 json。从这里我使用 bootsrap 组装一张桌子。问题是 MxN 表的大小不同。我不知道如何解决这个问题。不知道密钥是什么以及数量是多少。

请提供一个例子或一个行动方案。

例如下面的 JSON 先出现

        let arr =  [
            {
                'id': 0,
                'id1': 0,
                'id2': 0,
            },
            {
                'id': 1,
                'id1': 0,
                'id2': 0,
            },
            {
                'id': 0,
                'id1': 1,
                'id2': 0,
            },
            {
                'id': 1,
                'id1': 1,
                'id2': 0,
            },
            {
                'id': 0,
                'id1': 1,
                'id2': 0,
            },
            {
                'id': 1,
                'id1': 1,
                'id2': 0,
            }
        ]

然后来了这个

    let arr =  [
        {
            'id': 0,
            'iq': 0,
        },
        {
            'id': 1,
            'iq': 0,
        },
        {
            'id': 0,
            'iq': 0,
        }
    ]
javascript

1 个回答

  1. Best Answer

    不知何故匆匆忙忙。

    returnData();

function createTable(data) {
    let table = document.createElement('table');

    for( var i = 0; i < data.length; i++ ) {
        var child = data[i];
        if(i === 0 ) {
           addHeaders(table, Object.keys(child));
        }
        var row = table.insertRow();
        Object.keys(child).forEach(function(k) {
        var cell = row.insertCell();
        cell.appendChild(document.createTextNode(child[k]));
    })    
   }
   
   function addHeaders(table, keys) {
      let row = table.insertRow();
      for(let i = 0; i < keys.length; i++ ) {
         let cell = row.insertCell();
         cell.appendChild(document.createTextNode(keys[i]));
      }
   }
   return table
}

function returnData() {
  document.getElementById('tableContainer').innerHTML = '';
  let arr =  [
            {
                'id': 0,
                'id1': 0,
                'id2': 0,
            },
            {
                'id': 1,
                'id1': 0,
                'id2': 0,
            },
            {
                'id': 0,
                'id1': 1,
                'id2': 0,
            },
            {
                'id': 1,
                'id1': 1,
                'id2': 0,
            },
            {
                'id': 0,
                'id1': 1,
                'id2': 0,
            },
            {
                'id': 1,
                'id1': 1,
                'id2': 0,
            }
        ];
  document.getElementById('tableContainer').appendChild(createTable(arr));
}

function updateData() {
  document.getElementById('tableContainer').innerHTML = '';
  let arr =  [
        {
            'id': 0,
            'iq': 0,
        },
        {
            'id': 1,
            'iq': 0,
        },
        {
            'id': 0,
            'iq': 0,
        }
    ];
  document.getElementById('tableContainer').appendChild(createTable(arr));
}


  
    <div id="tableContainer"></div>


<button onclick='return returnData()'>Return</button>
<button onclick='return updateData()'>Update</button>

    • 1

相关问题