从用户输入动态创建表

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
}

尝试使用它来代替这两行：

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

说明 insertRow函数在括号中指定的索引位置插入新表行（<tr>）。它只插入一行。因此，如果index为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)也是错误的。

除了这些评论，我不能再进一步了。我不确定你在输出的表结构中究竟要找到什么。在我看来，你想要一行有两列，但Dharman的答案表明他读了你想要多行。考虑使用显示所需表格的标记更新您的问题。

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

在JSFiddle关闭的情况下修改了JS：

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