0

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

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>
4

2 回答 2

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

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

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

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

于 2012-12-28T13:48:53.553 回答
0

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

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

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

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

编辑：使用您的评论获取更多信息，我编写了以下代码演示供您尝试：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);
};
于 2012-12-28T14:26:40.897 回答