使用 JS DOM 的动态表

Question

我正在尝试使用 DOM 动态填充我网页上的表格。 我的想法是使用 generateTable 函数，将每个表作为参数传递，并在每个表的函数内部设置 switch case。 当我测试第一个表时，浏览器中没有显示任何内容。

这是JS：

var language = "English";
    var subtitle;
    window.onload = function() {
    generateTable("list");
    subtitle = document.querySelector("#subtitle");
    document.querySelector("#menu_21").onclick = function () { generateTable('pop1');};
    document.querySelector("#menu_22").onclick = function () { generateTable('pop2');};
    document.querySelector("#menu_31").onclick = function () { generateTable('aac1');};
    document.querySelector("#menu_32").onclick = function () { generateTable('aac2');};
    document.querySelector("#menu_41").onclick = function () { generateTable('lang1');};
    document.querySelector("#menu_42").onclick = function () { generateTable('lang2');};
    document.querySelector("#menu_43").onclick = function () { generateTable('lang3');};
    document.querySelector("#menu_44").onclick = function () { generateTable('lang4');};
    document.querySelector("#menu_45").onclick = function () { generateTable('lang5');};
    document.querySelector("#menu_46").onclick = function () { generateTable('lang6');};
    document.querySelector("#menu_47").onclick = function () { generateTable('lang7');};
    document.querySelector("#menu_48").onclick = function () { generateTable('lang8');};
}

function getTdImgElement(url,alt,height,width) {
    var cell = document.createElement("td");
    var image = document.createElement("img");
    image.setAttribute("src", url);
    image.setAttribute("alt", alt);
    if (height) image.setAttribute("height", height);
    if (width) image.setAttribute("width", width);
    cell.appendChild(image);
    return cell;
}

function getRow (i) {
    var row = document.createElement("tr");
    var imageURL = "../../flags/" + countries[i].Code.toLowerCase() + ".png";
    row.appendChild(getTdImgElement(imageURL,"",20px,20px));
    for (int j = 0;j < countries[i].length - 1;j++) {
    var cell = document.createElement("td");
    cell.appendChild(document.createTextNode(countries[i][j]));
    }
    var lastCell = document.createElement("td");
    lastCell.appendChild(document.createTextNode(countries[i].Name.language));
    cell += lastCell;
    row.appendChild(cell);
    tableBody.appendChild(row);
}

function generateTable(a) {
document.querySelector('#subtitle').innerHTML = "Hello!";
    var tableBody = document.querySelector("#tableBody");
    if (a == 'pop1') {
    document.querySelector('#subtitle').innerHTML = "Hello!";
    for (int i = 0; i < countries.length;i++) {
        getRow(i);
    }
    }
}

Answer 1

有很多语法错误，下面这个应该更好。

var language = "English";
var subtitle;
window.onload = () => {
generateTable("list");
subtitle = document.querySelector("#subtitle");
document.querySelector("#menu_21").onclick = function() {
    generateTable('pop1');
};
document.querySelector("#menu_22").onclick = function() {
    generateTable('pop2');
};
document.querySelector("#menu_31").onclick = function() {
    generateTable('aac1');
};
document.querySelector("#menu_32").onclick = function() {
    generateTable('aac2');
};
document.querySelector("#menu_41").onclick = function() {
    generateTable('lang1');
};
document.querySelector("#menu_42").onclick = function() {
    generateTable('lang2');
};
document.querySelector("#menu_43").onclick = function() {
    generateTable('lang3');
};
document.querySelector("#menu_44").onclick = function() {
    generateTable('lang4');
};
document.querySelector("#menu_45").onclick = function() {
    generateTable('lang5');
};
document.querySelector("#menu_46").onclick = function() {
    generateTable('lang6');
};
document.querySelector("#menu_47").onclick = function() {
    generateTable('lang7');
};
document.querySelector("#menu_48").onclick = function() {
    generateTable('lang8');
};
};

function getTdImgElement(url, alt, height, width) {
var cell = document.createElement("td");
var image = document.createElement("img");
image.setAttribute("src", url);
image.setAttribute("alt", alt);
if (height) image.setAttribute("height", height);
if (width) image.setAttribute("width", width);
cell.appendChild(image);
return cell;
}

function getRow() {
var row = document.createElement("tr");
var imageURL = "../../flags/" + countries[i].Code.toLowerCase() + ".png";
row.appendChild(getTdImgElement(imageURL, "", 20, 20));
for (j = 0; j < countries[i].length - 1; j++) {
    var cell = document.createElement("td");
    cell.appendChild(document.createTextNode(countries[i][j]));
}
var lastCell = document.createElement("td");
lastCell.appendChild(document.createTextNode(countries[i].Name.language));
cell += lastCell;
row.appendChild(cell);
tableBody.appendChild(row);
}

function generateTable(a) {
document.querySelector('#subtitle').innerHTML = "Hello!";
var tableBody = document.querySelector("#tableBody");
if (a == 'pop1') {
    document.querySelector('#subtitle').innerHTML = "Hello!";
    for (i = 0; i < countries.length; i++) {
    getRow();
    }
}
}