根据用户输入制作表格

Making a table based of user input

本文关键字：表格 输入 用户      更新时间：2023-09-26
<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();
}

在这里，我想要的是，当用户在字段中输入一些数字时，它应该创建一个具有相同行的表，并在其中包含数据"这是您的表"。我的意思是，如果我输入 5，它应该制作 5 行和 5 列，每个单元格中都有"这是你的表"。目前它只制造一个细胞。我知道它离期望的输出很远，但请帮助我。提前谢谢。

您只获得 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/

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

tableRow += "<tr>" + tableData[i] + "</tr>";
         ^
相关文章：