Создание таблицы с Javascript и динамическими переменными - PullRequest
Новая
       0

Создание таблицы с Javascript и динамическими переменными

0 голосов
/ 29 мая 2018

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

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

window.onload = oppdater;



    function oppdater() {
        document.getElementById("btnRegistrer").onclick = registrer;
    }

    function registrer() {
        var arrayListe = [];
        var reg = {};

        var verdi0 = parseInt(document.getElementById("txtUke").value);
        var verdi1 = parseInt(document.getElementById("txtAntmiddager").value);
        var verdi2 = parseInt(document.getElementById("txtBarn").value);
        var verdi3 = parseInt(document.getElementById("txtUngdom").value);
        var verdi4 = parseInt(document.getElementById("txtVoksne").value);

        arrayListe.push(verdi0);
        arrayListe.push(verdi1);
        arrayListe.push(verdi2);
        arrayListe.push(verdi3);
        arrayListe.push(verdi4);

        var tabell = document.getElementById("tblTabell");

        var rute = 0;
        var nyBestilling = document.createElement("tr");
        for (var i = 0; i < 5; i++) {
            var rad = document.createElement("td");
            rad.id = "rute"+i;
            rute++;
            nyBestilling.appendChild(rad);
        }
        tabell.appendChild(nyBestilling);

        for (var j = 0; j < 5; j++) {
            var inputt = document.getElementById("rute"+j);
            inputt.innerHTML = arrayListe[j];
        }

    }
    </script>
</head>
<body>
    <h1>Bestillinger</h1>
    <p>Uke nr: <input type="text" id="txtUke"></input></p>
    <p>Antall middager: <input type="text" id="txtAntmiddager" max="3" min="2"></input></p>
    <p>Antall barn: <input type="text" id="txtBarn"></input></p>
    <p>Antall ungdom: <input type="text" id="txtUngdom"></input></p>
    <p>Antall voksne: <input type="text" id="txtVoksne"></input></p>
    <button id="btnRegistrer">Registrer</button>

    <table id="tblTabell">
        <tr><th>Uke</th><th>Ant. middager</th><th>Ant. barn</th><th>Ant. ungdom</th><th>Ant. voksne</th></tr>

    </table>
</body>

Ответы [ 2 ]

0 голосов
/ 29 мая 2018

Не проверено, но должно работать. 

    var nyBestilling = document.createElement("tr");
    for (var i = 0; i < 5; i++) {
        var rad = document.createElement("td");
        rad.innerHTML = arrayListe[i];
        nyBestilling.appendChild(rad);
    }
    tabell.appendChild(nyBestilling);

и удалить последний цикл for.

Если вы создаете стили на основе идентификаторов, вы можете сохранить их, но лучше изменить ихв классы и обновить определения CSS.

0 голосов
/ 29 мая 2018

Элемент id значения: уникальный :

Глобальный атрибут id определяет уникальный идентификатор (ID), который должен быть уникальным во всем документе.Его целью является идентификация элемента при связывании (с использованием идентификатора фрагмента), сценариях или стилях (с помощью CSS).

Вы создаете элементы с дублирующимися идентификаторами в rad.id = "rute"+i;

Либо не присваивайте идентификаторы элементам, либо присваивайте (предпочтительно) и сохраняйте ссылки на них, если вы хотите манипулировать ими, либо оставляйте i вне функции и увеличивайте i до новых значений на каждой итерации.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...