从对象数组生成HTML表 [英] Generating an HTML table from an array of objects

问题描述

我一直在尝试生成一个函数，以根据对象数组创建HTML表。这是需要制作成表格的数组。

I've been trying to generate a function to create an HTML table from an array of objects. This is the array that needs to be made into a table.

let units = [
    {
        'code': 'COMP2110',
        'title': 'Web Technology', 
        'offering': 'S1'
    },  
    {
        'code': 'COMP2010',
        'title': 'Algorithms and Data Structures', 
        'offering': 'S1'
    },
    {
        'code': 'COMP2150',
        'title': 'Game Design', 
        'offering': 'S1'
    },
    {
        'code': 'COMP2320',
        'title': 'Offensive Security', 
        'offering': 'S1'
    },
    {
        'code': 'COMP2200',
        'title': 'Data Science', 
        'offering': 'S2'
    },
    {
        'code': 'COMP2250',
        'title': 'Data Communications', 
        'offering': 'S2'
    },
    {
        'code': 'COMP2300',
        'title': 'Applied Cryptography', 
        'offering': 'S2'
    },
    {
        'code': 'COMP2000',
        'title': 'Object-Oriented Programming Practices', 
        'offering': 'S2'
    },
    {
        'code': 'COMP2050',
        'title': 'Software Engineering', 
        'offering': 'S2'
    },
    {
        'code': 'COMP2100',
        'title': 'Systems Programming', 
        'offering': 'S2'
    }
]

我尝试过一个函数，但不知道如何使它工作。我也不知道如何查询函数。

I've tried a function but I have no idea how to get it to work. I also have no idea how to get a query into the function.

function unit_table() {
    var totalRows = 3;
    var cellsInRow = 3;

    function drawTable() {
        // get the reference for the body
        var first = document.getElementById('first');

        // creates a <table> element
        var tbl = document.createElement("table");

        // creating rows
        for (var r = 0; r < totalRows; r++) {
            var row = document.createElement("tr");

            // create cells in row
            for (var c = 0; c < cellsInRow; c++) {
                m=0;
                var cell = document.createElement("td");
                var cellText = document.createTextNode(units[n][m]);
                cell.appendChild(cellText);
                row.appendChild(cell);
                m=m+1;
            }           

            n=n+1;
            tbl.appendChild(row); // add the row to the end of the table body
        }

        first.appendChild(tbl); // appends <table> into <first>
    }
    window.onload=drawTable; 
    // your code here
}

任何帮助将不胜感激。

Any help would be greatly appreciated.

推荐答案

个单位[n] [m] 将在 m 是包含对象键的字符串。

The units[n][m] will work if m is a string containing the key of the object.

示例单位[0] [代码] 将返回第一个对象的代码值。

example units[0]["code"] will return the code value of first object.

可以通过在字符串中动态创建html并将 table.innerHTML 设置为表格来填充表格。

Populating the table can be done by making html dynamically in string and table.innerHTML to set it to table.

为此，我们使用 for（在对象中放置键）来遍历键

对于列名

let tableString="<tr>"
for(let column in units[0]){
  tableString+=`<th>${column}</th>`
}

上面的代码将生成这样的字符串

Above code will make a string like this

<tr>
<th>code</th>
<th>title</th>
<th>offering</th>
</tr>

用于列数据

tableString+="</tr>"
units.forEach(element => {
    tableString+="<tr>"
    for(let prop in element){
      tableString+=`<td>${element[prop]}</td>`
    }
    tableString+="</tr>"
});

上面将制作这样的字符串，并将重复此操作直到数组结尾

Above will make string like this and this will repeat until end of array

 <tr>
   <td>COMP2110</td>
   <td>Web Technology</td>
   <td>S1</td>
   </tr>
  <tr>...
  </tr>
  <tr>...
  </tr>

最后

 document.querySelector('#tb').innerHTML=tableString;

let units = [
    {
        'code': 'COMP2110',
        'title': 'Web Technology', 
        'offering': 'S1'
    },  
    {
        'code': 'COMP2010',
        'title': 'Algorithms and Data Structures', 
        'offering': 'S1'
    },
    {
        'code': 'COMP2150',
        'title': 'Game Design', 
        'offering': 'S1'
    },
    {
        'code': 'COMP2320',
        'title': 'Offensive Security', 
        'offering': 'S1'
    },
    {
        'code': 'COMP2200',
        'title': 'Data Science', 
        'offering': 'S2'
    },
    {
        'code': 'COMP2250',
        'title': 'Data Communications', 
        'offering': 'S2'
    },
    {
        'code': 'COMP2300',
        'title': 'Applied Cryptography', 
        'offering': 'S2'
    },
    {
        'code': 'COMP2000',
        'title': 'Object-Oriented Programming Practices', 
        'offering': 'S2'
    },
    {
        'code': 'COMP2050',
        'title': 'Software Engineering', 
        'offering': 'S2'
    },
    {
        'code': 'COMP2100',
        'title': 'Systems Programming', 
        'offering': 'S2'
    }
]
let tableString="<tr>"
for(let column in units[0]){
  tableString+=`<th>${column}</th>`
}
tableString+="</tr>"
units.forEach(element => {
    tableString+="<tr>"
    for(let prop in element){
      tableString+=`<td>${element[prop]}</td>`
    }
    tableString+="</tr>"
});
document.querySelector('#tb').innerHTML=tableString;

table td {
border:1px solid black;
}

<table id="tb">

</table>

这篇关于从对象数组生成HTML表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！