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>1 行だけ挿入します。したがって、インデックスが 0の場合<tr>、最初の行としてテーブルの先頭に追加されます。同様に、-1 は<tr>テーブルの最後の行として追加されます。

insertCell<td>関数は、row( ) のインデックス位置にcell( ) を挿入します<tr>。上記と同じ -1 は、行の最後の位置に新しいセルを追加することを意味します。

各行は、テーブルに追加するか、後で使用するために配列に格納する必要があるため、table.appendChild(row);連続する各行を配列に追加するように追加しました。

于 2012-12-28T13:48:53.553 に答える
0

table.insertRowそしてtableRow.insertCell、それらのパラメータとして、挿入を実行したいインデックスを取ります。代わりに、HTMLBRタグに追加されたフィールド値を含む文字列を渡します（その場合は不正な形式です）。

さらに、要素にテキストを追加するには、テキストノードを作成しdocument.createTextNode、それらのノードを問題の要素に追加する必要があります。

最後に、の子ではなくcols、の子である必要があります。したがって、あなたの行もエラーになっています。rowstabletable.appendChild(cols)

それらのコメントを超えて、私はそれ以上進むことはできません。出力されたテーブル構造で正確に何を探しているのかわかりません。あなたは2列の1行が必要なようですが、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);
};
于 2012-12-28T14:26:40.897 に答える