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

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

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">
        
        <input id="taskname" type="text" placeholder="Enter the task name here"> 
<input id="days" name="days" type="number" min="1" max="7">
<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
nl ja de
Я использую Затмение, так имейте вход в систему. Can' t открывают keycharmap файл и ошибку JSCallback. Don' t знают, релевантны ли они.
добавлено автор Inkers, источник
Вы включали ошибочный пульт? Это - спаситель, поскольку это может сообщить об ошибках, где JavaScript обычно спокойно терпел бы неудачу.
добавлено автор RonaldBarzell, источник

2 ответы

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

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.

1
добавлено
Спасибо Дхэрмен, я добавил петлю вместо тех линий, как предложено. Поскольку я понимаю его, это образует петли через ценности и создаст количество введенных рядов и число раз (в первом положении?). Я получаю ошибку, теперь заявляя, что ряды не определяются. Я предполагаю, что должен создать переменную ряда и изменить table.appendChild линию также.
добавлено автор Inkers, источник
Плюс 1 для понимания, что пользователь хотел и показ ему вложенные циклы. Я действительно думаю, что ваш ответ, возможно, предоставил еще некоторую информацию и объяснение, как бы то ни было.
добавлено автор JAAulde, источник

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);
};
0
добавлено
Хорошо спасибо. Количество рядов зависит от числа, вводы данных пользователем ко временам и количеству колонок зависят от числа дней. Я пытаюсь взять те ценности, передать их к столу и произвести его, таким образом, я думаю, что петля, вероятно, что я хочу. Я буду держать в нем. Если я буду иметь успех, я отправлю назад.
добавлено автор Inkers, источник
JAAulde, большое спасибо за скрипку. That' s, что я пытаюсь сделать. Как оказалось, я был почти там, но после сравнения вашего кода и мой I видит, как я добавил немного дополнительный в петлях (который, вероятно, ломал его), и твой более эффективен в настроенном. Еще раз спасибо. Теперь я просто должен выяснить, как позволить пользователю добавлять изображение к узлам. Это должно быть забавой! P.S. Я пытался голосовать, но don' у t есть достаточно уважения!
добавлено автор Inkers, источник
Хорошо, спасибо за обновление. Посмотрите, что мой редактировать, пожалуйста.
добавлено автор JAAulde, источник
Довольный это помогло. Необходимо быть в состоянии принять или мой ответ или другой. Я забываю, выбирая удары способности.
добавлено автор JAAulde, источник
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском