从用户输入动态创建表

Question

我正在从表单中获取用户输入并尝试从该输入创建表。输入应确定行数和列数。我尝试了以下方法，但我什么也没得到。我有点难过。任何帮助表示赞赏。

JS

function makeChart(){
    var table = document.createElement("table");
    var taskName = document.getElementById("taskname").value + "</br>";
    var numDays = document.getElementById("days").value + "</br>";
    var howOften = document.getElementById("times").value + "</br>";
    var rows=table.insertRow(howOften);
    var cols=rows.insertCell(numDays);
    document.getElementById("holdTable").appendChild(table);
    table.appendChild(rows);
    table.appendChild(cols);
}

HTML

<div id="holdTable">
    <form id="chartInput">
        <label for="taskname">Task</label>
        <input id="taskname" type="text" placeholder="Enter the task name here"> <br>

        <label for="days">How many days</label>
        <input id="days" name="days" type="number" min="1" max="7"> <br>

        <label for="times">How many times a day</label>
        <input id="times" name="times" type="number" min="1" max="4"> <br>

        <input id="createChart" type="button" value="Make the chart" onClick="makeChart();"> <br>
    </form>
</div>

Answer 1

我认为你需要使用循环。

for(var i = 1;i<=howOften;i++)
{
    var row = table.insertRow(-1)
    for(var i = 1;i<=numDays;i++)
    {
        row.insertCell(-1)
    }
    table.appendChild(row);//edited
}

尝试用这个代替这 2 行：

var rows=table.insertRow(howOften);
var cols=rows.insertCell(numDays);

解释
insertRow 函数在括号中指定的索引位置插入新表行 (<tr>)。它只插入一行。因此，如果索引为 0，<tr> 将作为第一行附加到表的开头。同样，-1 将<tr> 附加为表中的最后一行。

insertCell 函数将单元格（<td>）插入行的索引位置（<tr>）。与上面相同 -1 表示它在行的最后一个位置添加新单元格。

每一行都必须附加到表中或存储在数组中以供以后使用，因此我添加了table.appendChild(row);，它将每个连续的行添加到数组中。

Answer 2

table.insertRow 和tableRow.insertCell 将您希望插入的索引作为参数。相反，您正在传递一个字符串，其中包含附加到 HTML BR 标记的字段值（那是一种格式错误的标记）。

此外，要向元素添加文本，您需要使用 document.createTextNode 创建文本节点并将这些节点附加到相关元素。

最后，cols 应该是 rows 的子代，而不是 table 的子代。所以你的行，table.appendChild(cols) 也是错误的。

除了那些 cmets，我不能再进一步了。我不确定您在输出的表结构中到底在寻找什么。在我看来，你想要一行两列，但达曼的回答表明他读它就像你想要多行一样。考虑使用一些显示所需表格的标记来更新您的问题。

编辑：使用您的评论获取更多信息，我编写了以下代码演示供您尝试：http://jsfiddle.net/Kkb7n/。为了演示，我让它使用“任务名称”作为创建单元格的文本内容。

修改 JS 以防 JSFiddle 宕机：

var makeChart = function () {
    var table = document.createElement('table'),
        taskName = document.getElementById('taskname').value,
        numDays = document.getElementById('days').value, //columns
        howOften = document.getElementById('times').value, //rows
        row,
        r,
        col,
        c;

    for (r = 0; r < howOften; r++) {
        row = table.insertRow(-1);

        for (c = 0; c < numDays; c++) {
            col = row.insertCell(-1);
            col.appendChild(document.createTextNode(taskName));
        }
    }

    document.getElementById('holdTable').appendChild(table);
};