Javascript 向HTML表的每一列添加输入

当我添加新行时，我试图向HTML表的每个单元格添加一个输入字段。问题是每次单击按钮时，它只会在第一列中添加一个输入字段。如果我更改索引号，它只适用于第一列或最后一列，但中间没有列

项目
盎司（盎司）
克（克）
液体盎司（FOz）
毫升（毫升）
滴
完整的
点击按钮测试功能性

点击我
函数AddRow（）{
//从HTML文件中获取表的ID
var table=document.getElementById（“表格”）；
//计算表中的列数
var columnNumber=document.getElementById（“表”）.rows[0].cells.length；
//将行添加到表中的最后一行
var行=document.getElementById（“表”）.insertRow（-1）；
//在表中创建输入字段
var newInput=document.createElement（“输入”）；
setAttribute（“类型”、“文本”）；
setAttribute（“占位符”，“原始好名字”）；
newInput.classList.add（“TableInput”）；
//将列添加到新行匹配标题
对于（i=1；i您需要创建
输入
，并将其附加到创建单元格的循环中的单元格，以便创建多个单元格


/*此处仅用于在堆栈溢出环境中显示*/
输入{宽度：5em；}

项目
盎司（盎司）
克（克）
液体盎司（FOz）
毫升（毫升）
滴
完整的
点击按钮测试功能性

点击我
函数AddRow（）{
//从HTML文件中获取表的ID
var table=document.getElementById（“表格”）；
//计算表中的列数
var columnNumber=document.getElementById（“表”）.rows[0].cells.length；
//将行添加到表中的最后一行
var行=document.getElementById（“表”）.insertRow（-1）；
//将列添加到新行匹配标题
//循环应该从0开始，只要小于
//数组长度
对于（i=0；i//newInput.setAttribute（“type”，“text”）；您需要创建
输入
，并将其附加到创建单元格的循环中的单元格，以便创建多个单元格


/*此处仅用于在堆栈溢出环境中显示*/
输入{宽度：5em；}

项目
盎司（盎司）
克（克）
液体盎司（FOz）
毫升（毫升）
滴
完整的
点击按钮测试功能性

点击我
函数AddRow（）{
//从HTML文件中获取表的ID
var table=document.getElementById（“表格”）；
//计算表中的列数
var columnNumber=document.getElementById（“表”）.rows[0].cells.length；
//将行添加到表中的最后一行
var行=document.getElementById（“表”）.insertRow（-1）；
//将列添加到新行匹配标题
//循环应该从0开始，只要小于
//数组长度
对于（i=0；i//setAttribute（“type”、“text”）；克隆输入或简化脚本

我使HTML有效，并按照建议使用eventListener


const tb=document.getElementById（“tb”）；
const columnNumber=document.queryselectoral（“#table thead trth”）。长度-1；
常数inp=''；
设cnt=1；
document.getElementById（“add”）.addEventListener（“单击”，（）=>{
tb.innerHTML+=`
${cnt++}
${[…数组（columnNumber）.keys（）].map（i=>inp.join（“”）}
`
})
。对{
文本对齐：右对齐；
}

项目
盎司（盎司）
克（克）
液体盎司（FOz）
毫升（毫升）
滴
完整的
点击按钮测试功能性

单击我
克隆输入或简化脚本

我使HTML有效，并按照建议使用eventListener


const tb=document.getElementById（“tb”）；
const columnNumber=document.queryselectoral（“#table thead trth”）。长度-1；
常数inp=''；
设cnt=1；
document.getElementById（“add”）.addEventListener（“单击”，（）=>{
tb.innerHTML+=`
${cnt++}
${[…数组（columnNumber）.keys（）].map（i=>inp.join（“”）}
`
})
。对{
文本对齐：右对齐；
}

项目
盎司（盎司）
克（克）
液体盎司（FOz）
毫升（毫升）
滴
完整的
点击按钮测试功能性

单击我
非常感谢！我还发现我可以通过HTML添加元素来实现这一点。但这似乎更直观！谢谢！现在，有什么方法可以在中间列为数字的情况下输入第一列和最后一列文本？@Taylorlarechea`是的，只需检查循环中的列索引即可您创建元素，如果索引不是<代码> 0 或 CulnNode1-1/代码>（第一个和最后一个列索引），设置<代码> NeWunPode.Type =“数字”< /C> >，否则，不要（因为<代码>类型=“text”< /Cord>是默认的）。点击答案左上角的复选标记来回答问题。非常感谢！我还发现我可以通过HTML添加元素来实现这一点。但这似乎对我所做的更直观！谢谢！现在，有什么方法可以在中间列为数字的情况下输入第一列和最后一列文本？@TaylorLarrechea`是的，j在创建元素之前，必须检查循环中的列索引，如果索引不是
0
或
columnNumber-1
（第一列和最后一列索引），请设置
newInput.type=“number”
，否则不要（因为
type=“text”
是默认值）。我将更新