Question

<input type="number" id="arrayLength" />
<button id="myButton">Submit</button>
<table id="finalTable"></table>

var tableData = ["<td>"];

function myFunction(){
    var tableRow;
    tableData.length = document.getElementById("arrayLength").value;
    for(i=0; i<tableData.length; i++){
        tableData[i] = "This is your table";
        tableRow = "<tr>" + tableData[i] + "</tr>";
    }

    return tableRow;

}

document.getElementById("myButton").onclick = function(){
    document.getElementById("finalTable").innerHTML = myFunction();
}

这就是我想要的，当用户在字段中输入一些数字时，它应该创建一个具有相同行和数字的表。数据＆＃34;这是你的表＆＃34;在里面。我的意思是如果我输入5，它应该是5行＆amp;带有＆＃34的5列;这是你的表＆＃34;在每个细胞中。目前它只生产一个细胞。我知道它远离期望的输出，但请帮助我。提前谢谢。

Answer 1

您只获得1个单元格的原因是因为您要分配给tableRow而不是连接。此外，您可能希望使用嵌套for循环，以添加列和行：

function myFunction()
{
    var tableRow = ""; //Give a default value here
    var length = document.getElementById("arrayLength").value;
    for(i=0; i<length; i++){
        tableRow += "<tr>";
        for(j=0; j<length; j++)
        {
            tableRow += "<td>";
            tableRow += "This is your table";
            tableRow += "</td>";
        }
        tableRow += "</tr>";
    }
    return tableRow;
}

在这里我测试了它，以确保它有效：http://jsfiddle.net/k8dxqu6h/

Answer 2

每次迭代都会覆盖tableRow。连接，不要分配。

tableRow += "<tr>" + tableData[i] + "</tr>";
         ^

根据用户输入制作表格

2 个答案: