從輸入值創建HTML表

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表？ 此外，我必須檢查空白字段-即使一個字段為空白，也不會創建表，並且必須模糊空白輸入。 另外，如果有人想向我展示其他創建輸入的方式-我會很高興。

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>