如何使用 JavaScript 填充表格中的列

Question

我需要使用 JavaScript 创建一个基于具有嵌套对象的数组的简单表，该数组应该只有两列。在表的第一列的第一个单元格中，指定了处理器标题，然后将相应的处理器型号写入到较低的单元格中。在第二列的第一个单元格中，指示处理器频率标题，然后将频率写入较低的单元格。我能够为此任务生成代码，但它无法正常工作。由于某种原因，它没有在第一次迭代后将键写入列单元格，而是考虑了不必要的对象。这就是为什么您会在表头中得到未定义的值并出现重复。请告诉我如何解决这个问题。

let processorFrequency = [
    {
        titleOne : 'Processor', values : [
            {name : '80386LC (1988г.)'},
            {name : '80486DX4 (1994г.)'},
            {name : 'Pentium MMX (1997г.)'},
            {name : 'Pentium II (1998г.)'},
            {name : 'Pentium III (1999г.)'},
            {name : 'Pentium IV'},
            {name : 'Athlon-Athlon XP'},
            {name : 'Athlon 64'},

        ]
    },
    {
        titleTwo : 'Processor frequency', values : [
            {name : '33-60'},
            {name : '80-133'},
            {name : '160-233'},
            {name : '260-550'},
            {name : '300-1400'},
            {name : '1600-3800'},
            {name : '1400-3200'},
            {name : '2600-3800'},
        ]
},
]



function Test(){
    let table = document.getElementsByTagName('table')[0];
    for (let i = 0; i < processorFrequency.length; i++) {
        var pf = processorFrequency[i];
        let tableRow = document.createElement('tr');
        let tdOne = document.createElement('td');
        let tdTwo = document.createElement('td');
        let txtOne = document.createTextNode(pf.titleOne);
        let txtTwo = document.createTextNode(pf.titleTwo);
        
        tdOne.className = 'head';
        tdTwo.className = 'head';

        tdOne.appendChild(txtOne);
        tdTwo.appendChild(txtTwo);

        tableRow.appendChild(tdOne);
        tableRow.appendChild(tdTwo);
        table.appendChild(tableRow);

        var values = pf.values;
        for (let j = 0; j < values.length; j++) {
            let value = values[j];
            let tableRow = document.createElement('tr');
            let td = document.createElement('td');
            let txt = document.createTextNode(value.name);
            td.appendChild(txt);
            tableRow.appendChild(td);
            table.appendChild(tableRow);
        }
    }
} 

Test();

table td, table th {
  border: 1px solid black;
  padding: 5px;
}

<table><!-- Contents will be created via JavaScript -->
</table>

Answer 1

问题似乎在于您正在为每个处理器和频率值创建一个新行，这会导致额外的行添加到表中。正确的方法应该是为每个处理器创建一行，其中有两个单元格（一个用于处理器型号，一个用于处理器频率）：

let processorFrequency = [
    {
        titleOne: 'Processor', values: [
            { name: '80386LC (1988г.)' },
            { name: '80486DX4 (1994г.)' },
            { name: 'Pentium MMX (1997г.)' },
            { name: 'Pentium II (1998г.)' },
            { name: 'Pentium III (1999г.)' },
            { name: 'Pentium IV' },
            { name: 'Athlon-Athlon XP' },
            { name: 'Athlon 64' },
        ]
    },
    {
        titleTwo: 'Processor frequency', values: [
            { name: '33-60' },
            { name: '80-133' },
            { name: '160-233' },
            { name: '260-550' },
            { name: '300-1400' },
            { name: '1600-3800' },
            { name: '1400-3200' },
            { name: '2600-3800' },
        ]
    },
];

function Test() {
    let table = document.getElementsByTagName('table')[0];

    for (let i = 0; i < processorFrequency[0].values.length; i++) {
        let tableRow = document.createElement('tr');
        
        // Processor Name Cell
        let tdOne = document.createElement('td');
        let txtOne = document.createTextNode(processorFrequency[0].values[i].name);
        tdOne.appendChild(txtOne);
        tableRow.appendChild(tdOne);

        // Processor Frequency Cell
        let tdTwo = document.createElement('td');
        let txtTwo = document.createTextNode(processorFrequency[1].values[i].name);
        tdTwo.appendChild(txtTwo);
        tableRow.appendChild(tdTwo);

        table.appendChild(tableRow);
    }
}

Test();

Answer 2

要使用基于带有嵌套对象的数组的列填充表，其中每个对象代表处理器详细信息，您可以按照以下步骤操作：

1. 在 HTML 文件中使用适当的标题创建表格元素
2. 编写 JavaScript 代码来迭代数组，提取处理器型号和频率，并相应地填充表格单元格