想法

Question

如果我的对象的数据结构如下：

 { key1: 1, key2: 2, key3: 3, key4: 4, key5: 5 }

我（使用纯JS）如何将其转换为如下所示的表：

sample table format

（css不必看起来像这样。这只是我想要的格式）

但是，将要放入表中的数据将更改，那么我如何使它自动发生？

是的，它必须是一个对象。

非常感谢您。

有帮助的事情

如何向表中添加另一行/列
如何为每个单元格分配文本值
如何创建一个循环，该循环将能够获取对象中集合之一的键和键值
如果有人解释了这段代码含义的主要方面：

 function tableCreate() {
    //body reference 
    var body = document.getElementsById("body");

    // create elements <table> and a <tbody>
    var tbl     = document.createElement("table");
    var tblBody = document.createElement("tbody");
 
    // cells creation
    for (var j = 0; j <= 2; j++) {
        // table row creation
        var row = document.createElement("tr");

        for (var i = 0; i < 2; i++) {
            // create element <td> and text node 
            //Make text node the contents of <td> element
            // put <td> at end of the table row
            var cell = document.createElement("td");    
            var cellText = document.createTextNode("cell is row "+j+", column "+i); 

            cell.appendChild(cellText);
            row.appendChild(cell);
        }

        //row added to end of table body
        tblBody.appendChild(row);
    }

    // append the <tbody> inside the <table>
    tbl.appendChild(tblBody);
    // put <table> in the <body>
    body.appendChild(tbl);
    // tbl border attribute to 
    tbl.setAttribute("border", "2");
}

<div id="body"></div>

Answer 1

您所需要的只是键名和值。您可以使用Object.entries()

var data = Object.entries(yourObject);

通过上述操作data，您可以同时获得key和value。

function tableCreate(dataObj) {
    //body reference 
    var body = document.getElementsByTagName("body")[0];

    // create elements <table> and a <tbody>
    var tbl     = document.createElement("table");
    var tblBody = document.createElement("tbody");
  
    var entries = Object.entries(dataObj);

    // cells creation
    for (var j = 0; j < entries.length; j++) {
        // table row creation
        var row = document.createElement("tr");

        // Form and set the inner HTML directly
        row.innerHTML = `<td>${entries[j][0]}</td>${entries[j][1]}<td></td>`;

        //row added to end of table body
        tblBody.appendChild(row);
    }

    // append the <tbody> inside the <table>
    tbl.appendChild(tblBody);
    // put <table> in the <body>
    body.appendChild(tbl);
    // tbl border attribute to 
    tbl.setAttribute("border", "2");
}

Answer 2

您正在谈论的对象是一个json对象我告诉你如何在这种对象中进行迭代。令jsonobj为对象名称

for (key in jsonobj){
       console.log (jsonobj[key]);}

现在，您只需要在html标签中显示数据即可。我希望其余代码对您来说不是一个很大的挑战。

Answer 3

您可以尝试以下操作：

想法

您可以创建实用程序功能来创建行和单元格。它们非常通用，应独立于传递的数据结构或要处理的逻辑。
然后，您可以创建包装器函数，该包装器函数将以必要的格式处理数据。如果您愿意，他们可以具有业务逻辑。

这是，您将拥有更可重用的代码和更大的灵活性

function createTableFromObject(obj, selector) {
  var table = document.createElement('table');
  for (var k in obj) {
    table.appendChild(createRow([k, obj[k]]))
  }
  addToContainer(selector, table);
}

function createTableFromArray(arr, selector) {
  // You can add your logic here.
}

function createRow(values) {
  var row = document.createElement('tr');
  values.forEach(function(value) {
    row.appendChild(createCell(value))
  });
  return row;
}

function createCell(value) {
  var cell = document.createElement('td');
  cell.innerHTML = value;
  return cell;
}

function addToContainer(selector, element) {
  var container = document.querySelector(selector);
  container.appendChild(table);
}

var data = { key1: 1, key2: 2, key3: 3, key4: 4, key5: 5 };
createTableFromObject(data, '#content')

/* For demonstration purpose only */

td {
  margin: 5px;
  background: #ddd;
  border: 1px solid black;
  width: 50px;
  padding: 5px;
}

<div id='content' />

如何使用纯JavaScript创建一个表，该表会将数据循环到其中

3 个答案:

想法