根据用户输入制作表格

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();
}

Here what I want, when a user input some number in field, it should create a table with same rows & with data "this is your table" in it. I mean if I input 5, it should make 5 rows & 5 columns with "this is your table" in each cell. Currently it's making only one cell. I know it's far away from desired output, but please help me. Thanks in advance.

Answer 1

The reason you are only getting 1 cell, is because you are assigning to tableRow instead of concatenating. Also, you might want to use a nested for loop, to add columns as well as rows:

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;
}

And here's where I tested it, to make sure it works: http://jsfiddle.net/k8dxqu6h/

Answer 2

You are overwriting tableRow with every iteration. Concatenate, don't assign.

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