Создание таблицы HTML из входных значений - PullRequest
Новая
       10

Создание таблицы HTML из входных значений

0 голосов
/ 30 ноября 2018

У меня есть три входа, которые я создаю n раз

Мой HTML: 

<div id="div">
<input type="number" data-id="id0" name="value[]" placeholder="Введите 't'">
<input type="number" data-id="id0" name="value[]" placeholder="Введите 'C'">
<input type="number" data-id="id0" name="value[]" placeholder="Введите 'Q'">
</div>

Мой JavaScript: 

var count = 1;
var count2 = 1;
var count3 = 1;
button.addEventListener("click", function(){
var input = document.createElement('INPUT');
input.type = 'number';
input.setAttribute("data-id", "id" + count);
//input2.setAttribute("style", "margin-right: '5px'");
input.name = "value[]";
input.placeholder = "Введите 't'";
document.querySelector('#div').appendChild(input);
count++;
var input2 = document.createElement('INPUT');
input2.type = 'number';
input2.setAttribute("data-id", "id" + count2);
//input2.setAttribute("style", "margin-right: '5px'");
input2.name = "value[]";
input2.placeholder = "Введите 'C'";
document.querySelector('#div').appendChild(input2);
count2++;
var input3 = document.createElement('INPUT');
input3.type = 'number';
input3.setAttribute("data-id", "id" + count3);
//input3.setAttribute("style", "margin-right='5px'");
input3.name = "value[]";
input3.placeholder = "Введите 'Q'";
document.querySelector('#div').appendChild(input3);
count3++;

... когда я нажимаю: 

<input type="button" id="button" value="Добавить">

Как я могу создать HTML-таблицу со значениями из моих входов?Кроме того, я должен проверить пустые поля - если хотя бы одно поле пусто, таблица не будет создана, а пустые входы должны быть стерты.Также, если кто-то захочет показать мне другой способ создания входных данных - я буду рад.

1 Ответ

0 голосов
/ 30 ноября 2018

Я попытался сделать это в более функциональном подходе ... просто посмотрите, соответствует ли это вашим требованиям и также решает вашу проблему. 

var count = 0,
            types = ['t', 'C', 'Q'],
            button = document.getElementById('button');
        
        button.addEventListener("click", createInputs, false);

        function createInputs(){
            if(!validInput()) {
                return;
            }
            count += 1;
            createInput(count);
        }

        function createInput(count) {
            var totalInputs = document.getElementsByClassName('myInput').length;
            var existingNode = document.getElementsByClassName('myInput')[totalInputs - 1];
            
            types.forEach(function(type){
                var newNode = existingNode.cloneNode();
                newNode.value = null;
                newNode.id = type + + count; 
                newNode.placeholder = 'Placeholder ' + type;
                newNode.dataset.id =  'id' + count;
                appendNode(newNode);
            })            
        }

        function appendNode(node) {
            document.querySelector('#div').appendChild(node);
        }

        function validInput() {
            var myInputs = document.getElementsByClassName('myInput');
            var valid = true;
            Array.prototype.slice.call(myInputs).forEach( function(input) {
                input.classList.remove('error');
                if(!input.value) {
                    input.classList.add('error');
                    valid = false;
                }
            });
            return valid;
        }
        function removeError(event) {
            event.classList.remove('error');
        }
#div {
            text-align: center;
        }
        .myInput {
            height: 40px;
            outline: none;
            width: 150px;
            border: 1px solid #999;
            border-radius: 4px;
            padding: 5px 10px;
            margin: 5px;
            display: inline-block;
        }
        .myInput.error {
            border: 1px solid red;
        }
        #action {
            margin: 10px 0;
            text-align: center;
        }
        #button {
            width: 150px;
            height: 40px;
            background: #009688;
            color: #fff;
            font-weight: 600;
            font-size: 12px;
            border-radius: 4px;
            border: none;
            text-transform: uppercase;
            outline: none;
            cursor: pointer;
            
        }
        #button:hover {
            background: #008999;
        }
 <div id="div">
        <input type="number" onkeypress="removeError(this)" class="myInput" data-id="id0" name="value[]" placeholder="Placeholder 't'">
        <input type="number" onkeypress="removeError(this)" class="myInput" data-id="id0" name="value[]" placeholder="Placeholder 'C'">
        <input type="number" onkeypress="removeError(this)" class="myInput" data-id="id0" name="value[]" placeholder="Placeholder 'Q'">
    </div>
    <div id="action">
        <button type="button" id="button">
            clone inputs
        </button>
    </div>
...