javascript - 向表格添加按钮时遇到问题

Question

我正在尝试使用 javascript 将几个按钮添加到表格中，但是我一直使用 [objectHTMLInputElement] 向我提供此结果

这是我的代码:

function createDiseaseTable(country){
    var displayCountry = document.getElementById("countrySelected");
    displayCountry.innerHTML = country.name;
    var diseaseTable = document.getElementById("diseases");
    diseaseTable.innerHTML = "";
    for (var i = 0; i<country.diseases.length; i++) ////////////////////////////////////
    {
        var changeDisease = document.createElement('input');
        changeDisease.type = 'button';
        changeDisease.name = "x"
        changeDisease.onclick = hi();
        var row = diseaseTable.insertRow(i);
        var cell1 = row.insertCell(0)
        var cell2 = row.insertCell(1)
        var cell3 = row.insertCell(2)
        var cell4 = row.insertCell(3)
        var cell5 = row.insertCell(4);
        cell1.innerHTML = OurDiseases[i].name;
        cell2.innerHTML = OurDiseases[i].cureLevel;
        cell3.innerHTML = OurDiseases[i].killLevel;
        cell4.innerHTML = OurDiseases[i].cured;
        cell5.innerHTML = changeDisease;
        console.log(changeDisease);
    }
    var row = diseaseTable.insertRow();
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    var cell5 = row.insertCell(4);
    cell1.innerHTML = "Disease";
    cell2.innerHTML = "Level needed to cure";
    cell3.innerHTML = "Deaths each year";   
    cell4.innerHTML = "Cured";
    cell5.innerHTML = "More Info";

}

注意:我不担心点击后功能还没有运行，我只希望实际的按钮出现

Answer 1

你需要使用appendChild函数

您的代码可能看起来像这样:

...
cell5.appendChild(changeDisease);
...

您可以在此处找到有关此功能的更多详细信息:http://www.w3schools.com/jsref/met_node_appendchild.asp

更新 - 查看评论:

name 是元素的属性而不是按钮的标题，如果要设置标题，请改用属性 value - 这是一个示例: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_button