Creating html table from input values

Question

I have three inputs which I am creating n times

My 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>

My 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++;

... when I am press:

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

How can I create html table with values from my inputs? Besides I must checking empty fields - if even one field is empty, table will not creates and empty inputs must be blured. Also if somebody want to show me other way for creating inputs - I'll be glad.

I'd suggest translating your placeholder values into English in order that we - mostly English-speaking - might infer what those inputs are for. At the very least *tell* us how those inputs relate to the table you're creating. — David Thomas, Nov 30 '18 at 17:10
@David Thomas I don't understand for what people must understand my placeholders and how those inputs relate to the table and also for what somebody disliking my question. I have "number" type values in inputs and I just need algorythm, code - anything, which will help me to create a lot of with three in each in the with those values from my inputs. — Alexander Vasilchuk, Nov 30 '18 at 21:26
Because if we can understand what's meant to be happening it's easier for us to help you; but if you don't want to improve the chances of better help that's entirely up to you. — David Thomas, Dec 01 '18 at 19:52

score 1 · Accepted Answer · answered Nov 30 '18 at 17:56

I tried doing it in a more functionalapproach...just look if this suits your requirements and also solves your problem.

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>

Creating html table from input values

1 Answers1