Javascript 从输入值创建html表

我有三个输入，我正在创建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>

。。。当我按下按钮时：

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

如何使用输入的值创建html表？此外，我必须检查空字段——即使有一个字段是空的，表也不会创建，空输入必须模糊。

---

另外，如果有人想向我展示创建输入的其他方法，我会很高兴的。

我尝试了一种更实用的方法……看看这是否符合您的要求，也解决了您的问题

var计数=0，
类型=['t'，'C'，'Q']，
button=document.getElementById（'button'）；
按钮。addEventListener（“单击”，createInputs，false）；
函数createInputs（）{
如果（！validInput（））{
回来
}
计数+=1；
创建输入（计数）；
}
函数createInput（计数）{
var totalInputs=document.getElementsByClassName（'myInput'）。长度；
var existingNode=document.getElementsByClassName（'myInput'）[totalInputs-1]；
type.forEach（函数（类型）{
var newNode=existingNode.cloneNode（）；
newNode.value=null；
newNode.id=类型++计数；
newNode.placeholder='placeholder'+类型；
newNode.dataset.id='id'+计数；
追加节点（newNode）；
})            
}
函数追加节点（node）{
document.querySelector（“#div”）.appendChild（节点）；
}
函数validInput（）{
var myInputs=document.getElementsByClassName（'myInput'）；
var valid=true；
Array.prototype.slice.call（myInputs）.forEach（函数（输入）{
input.classList.remove（'error'）；
如果（！input.value）{
input.classList.add（'error'）；
有效=错误；
}
});
返回有效；
}
函数removeError（事件）{
event.classList.remove（'error'）；
}

#div{
文本对齐：居中；
}
.myInput{
高度：40px；
大纲：无；
宽度：150px；
边框：1px实心#999；
边界半径：4px；
填充物：5px10px；
保证金：5px；
显示：内联块；
}
.myInput.error{
边框：1px纯红；
}
#行动{
利润率：10px0；
文本对齐：居中；
}
#钮扣{
宽度：150px；
高度：40px；
背景#009688；
颜色：#fff；
字号：600；
字体大小：12px；
边界半径：4px；
边界：无；
文本转换：大写；
大纲：无；
光标：指针；
}
#按钮：悬停{
背景：#008999；
}

克隆输入

我建议将占位符值翻译成英语，以便我们（大部分说英语的人）可以推断这些输入的用途。至少告诉我们这些输入与您正在创建的表之间的关系。@David Thomas我不明白为什么人们必须理解我的占位符，这些输入与表之间的关系，以及为什么有人不喜欢我的问题。我在输入中有“数字”类型的值，我只需要算法，代码-任何东西，这将帮助我创建一个有三个，每个都有三个，并从我的输入值。因为如果我们能够理解将要发生什么，我们就更容易帮助你；但是如果你不想提高得到更好帮助的机会，那完全取决于你。

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