Динамично составьте таблицу от ввода данных пользователем

Question

Динамично составьте таблицу от ввода данных пользователем

Я беру ввод данных пользователем от формы и пытаюсь составить таблицу от того входа. Вход должен определить количество рядов и колонок. Я попробовал следующее, но я ничего не получаю. Я немного озадачен. Любая помощь ценится.

JS

function makeChart(){
    var table = document.createElement("table");
    var taskName = document.getElementById("taskname").value + "
";
    var numDays = document.getElementById("days").value + "
";
    var howOften = document.getElementById("times").value + "
";
    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">
        Task
        <input id="taskname" type="text" placeholder="Enter the task name here"> 


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


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


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

    </form>
</div>

0

добавлено 28 Декабрь 2012 в 01:41 автор Inkers отредактировано 30 Август 2018 в 04:02

Просмотры: 3

источник

nl ja de

Я использую Затмение, так имейте вход в систему. Can' t открывают keycharmap файл и ошибку JSCallback. Don' t знают, релевантны ли они.

добавлено 28 Декабрь 2012 в 02:11, автор Inkers, источник

Вы включали ошибочный пульт? Это - спаситель, поскольку это может сообщить об ошибках, где JavaScript обычно спокойно терпел бы неудачу.

добавлено 28 Декабрь 2012 в 01:46, автор RonaldBarzell, источник

2 ответы

Видеокурс по Java для начинающих

Получи видеокурс по Java для начинающих с упражнениями

Видеокурс "Создание приложений для Android"

Получи множество видеоуроков по Android сейчас

автор Dharman · Answer 1 · 2012-12-28T01:48Z

Я думаю, что необходимо использовать петлю.

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 function inserts new table row(<tr>) in at index position specified in brackets. It inserts only one row. So if index is 0 <tr> will be appended to the beggining of the table as a first row. Similarly -1 appends <tr> as the last row in the table.

insertCell function inserts cell(<td>) in at index position of the row(<tr>). Same as above -1 means it adds new cell at the last position in the row.

Each row than has to be appended to the table or stored in an array for later use therefore I added table.appendChild(row); which adds each consecutive row to the array.

автор JAAulde · Answer 2 · 2012-12-28T02:26Z

table.insertRow and tableRow.insertCell take, as their parameters, the index at which you wish to do the insertion. You are, instead, passing a string which contains your field values appended to an HTML BR tag (a malformed one at that).

Кроме того, чтобы добавить текст к элементу необходимо создать текстовые узлы с document.createTextNode и приложите те узлы к рассматриваемому элементу.

Наконец, седла должен быть ребенком ряды , не стол . Так ваша линия, table.appendChild (седла) по ошибке также.

Вне тех комментариев я не могу пойти далее. Я не уверен, что точно вы ищете в произведенной структуре таблицы. Это кажется мне, вы желаете один ряд с двумя колонками, но ответ Дхэрмена показывает, что он читает его как вы желающий многократные ряды. Рассмотрите обновление вашего вопроса с некоторым повышением, показывающим желаемый стол.

Edit: Using your comment for more information, I wrote the following code demo for you to try: http://jsfiddle.net/Kkb7n/ . For the sake of demonstration, I have it use the "task name" as the text content of the created cells.

Измененный 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);
};