Change Input Type With Javascript in HTML Table

Question

I have written some code that will allow a user to add rows to a table with a click of a button. In those rows input fields are inserted. My question is how do I make it so that the first column has the input type, "text" and so the middle columns have input type, "number". I would also like to have the last column not have an input field. Much appreciated! 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);
   }
 }

mplungjan · Accepted Answer · 2020-12-22 22:13:20Z

0

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>

answered Dec 22, 2020 at 22:13

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Taylor Larrechea Over a year ago

Does that JavaScript have to go in my, "AddRow" function or can it just sit in the file alone?

Taylor Larrechea Over a year ago

I can't get it to work, thank you for your help though.

mplungjan Over a year ago

@TaylorLarrechea My constact details are in my profile if you need me to look at your page

Collectives™ on Stack Overflow

Change Input Type With Javascript in HTML Table

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related