JavaScript二维数组循环赋值th元素内容不显示如何解决

代码存在两处语法错误，直接导致元素无内容显示：

• 二维数组定义语法错误：records数组内的两个子元素（子数组）之间遗漏逗号分隔符，数组无法被JS引擎正常解析
• 二维数组取值语法错误：JavaScript访问多维数组需要通过逐层方括号索引取值，写法records[i,1]中的逗号属于逗号操作符，会直接返回最后一个操作数1，实际执行逻辑为取records[1]，得到的是整个子数组而非目标字符串，无法作为文本内容正常渲染

1. 补全records数组内子数组之间的分隔逗号：

var records = [
    ['C', 'Descript'],
    ['D', 'Test']
];

2. 修正二维数组取值写法，使用两层方括号获取目标索引的文本值：

// 错误写法
// galleryheader.textContent = records[i,1];
// 正确写法
galleryheader.textContent = records[i][1];

const gallery_table = document.getElementById("gallery_table");
let list = ["A", "B"];
var idName = "";
var records = [
    ['C', 'Descript'],
    ['D', 'Test']
];

for (let i = 0; i < list.length; i++) {
    if (i % 3 === 0) {
        var newRowItem = document.createElement("tr");
        idName = "newRowItem";
        idName = idName.concat(i);
        newRowItem.setAttribute("id", idName);
        gallery_table.appendChild(newRowItem);
    }
    let newColItem = document.createElement('th');
    let galleryheader = document.createElement('h3');
    newColItem.setAttribute("class", i);    
    newRowItem.appendChild(newColItem);
    newColItem.appendChild(galleryheader);
    galleryheader.textContent = records[i][1];

    const element = document.getElementById(idName);
    let nodes = element.getElementsByClassName(i);
    for (let j = 0; j < nodes.length; j++) {
        nodes[j].style.padding = "2px";
        nodes[j].style.width = "33%";
        nodes[j].style.border = "1px solid black";
    }
}

内容的提问来源于stack exchange，提问作者Ryan C