在 HTML 表格中使用 Javascript 更改输入类型

如何解决在 HTML 表格中使用 Javascript 更改输入类型

我编写了一些代码，允许用户通过单击按钮向表中添加行。在这些行中插入输入字段。我的问题是如何使第一列具有输入类型“文本”，因此中间列具有输入类型“数字”。我还希望最后一列没有输入字段。非常感激！ HTML：

<table id="table">
  <thead>
    <th id="item">Item</th>
    <th>Ounces (Oz)</th>
    <th>Grams (g)</th>
    <th>Fluid Ounces (FOz)</th>
    <th>Milliliters (mL)</th>
    <th>Drops</th>
    <th>Completed</th>
  </thead>
</table>

JavaScript：

function AddRow() {
   // Get ID for table from HTML file
   var table = document.getElementById("table");
   // Count number of columns in table
   var columnNumber = document.getElementById("table").rows[0].cells.length;
   // Add row to last row in table
   var row = document.getElementById("table").insertRow(-1);
   // Add columns to new row matching header
   for (i = 1; i <= columnNumber; i++) {
     // Create Input field in table
     var newInput = document.createElement("INPUT");
     newInput.placeholder = "Enter Text Here";
     newInput.classList.add("TableInput");
     row.insertCell(0).appendChild(newInput);
   }
 }

解决方法

Continued from this

const tb = document.getElementById("tb");
const columnNumber = document.querySelectorAll("#table thead tr th").length - 2;
const inp = '<td><input type="number" placeholder="Raw Good Number" class="TableInput"/></td>';
let cnt = 1;
document.getElementById("add").addEventListener("click",() => {
  tb.innerHTML += `<tr>
    <td><input type="text" value="${cnt++}" /></td>
    ${[...Array(columnNumber).keys()].map(i => inp).join("")}
  </tr>`
})

input { width: 130px; }

<table id="table">
  <thead>
    <tr>
      <th id="item">Item</th>
      <th>Ounces (Oz)</th>
      <th>Grams (g)</th>
      <th>Fluid Ounces (FOz)</th>
      <th>Milliliters (mL)</th>
      <th>Drops</th>
      <th>Completed</th>
    </tr>
    <thead>
      <tbody id="tb">
      </tbody>
</table>

<p>Click button to test funtionality.</p>
<button type="button" id="add">Click Me</button>