从输入值创建 html table

Question

我正在创建三个输入 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 table？此外，我必须检查空字段——即使有一个字段为空，table 也不会创建，空输入必须模糊处理。另外，如果有人想向我展示创建输入的其他方式 - 我会很高兴。

Answer 1

我试过用更实用的方法来做...看看这是否符合您的要求并解决了您的问题。

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>

从输入值创建 html table

Creating html table from input values

html

javascript

html-table

button

input-field