Create a textbox inside a table using Javascript

Question

I would like to create a input control inside a table row on every append. Basically like a shopping cart where I can add a quantity for every item in the table. I am struggling. I get [object HTMLInputElement] displayed when I do it as per below.

x.setAttribute("type", "text");
x.setAttribute("value", "Hello World!");
var create = document.body.appendChild(x);

let carttable = document.getElementById('cartlist');
let item = items[index];
let row = document.createElement('tr');
row.innerHTML = `
    <td(${items.indexOf(item)})">${item.title}</td>
   <td>${item.genre}</td>
   <td>${"R" + item.price }</td>
   <td>${x}</td> `;
carttable.append(row);

because you are building a string and contacting a string and an object. Either you have to build the input as a string or build your table row as DOM objects. — epascarello
– epascarello, Commented Feb 24, 2020 at 14:30

Emiel Zuurbier · Accepted Answer · 2020-02-24 14:39:10Z

You could either use the append method to add your created input to a td and add that td to the row element.

let carttable = document.getElementById('cartlist');
let item = items[index];
let row = document.createElement('tr');
row.innerHTML = `
  <td(${items.indexOf(item)})">${item.title}</td>
  <td>${item.genre}</td>
  <td>${"R" + item.price }</td>
`;

let cell = document.createElement('td');
let input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("value", "Hello World!");
cell.append(input);
row.append(cell);

carttable.append(row);

Or instead of creating your input with document.createElement add it to your Template literal string in the row.innerHTML.

let carttable = document.getElementById('cartlist');
let item = items[index];
let row = document.createElement('tr');
row.innerHTML = `
  <td(${items.indexOf(item)})">${item.title}</td>
  <td>${item.genre}</td>
  <td>${"R" + item.price }</td>
  <td><input type="text" value="Hello World!"></td>
`;

carttable.append(row);

palaѕн · Accepted Answer · 2020-02-24 14:38:12Z

0

You can use string directly for this purpose instead of document.createElement("input"):

let carttable = document.getElementById('cartlist');
let item = items[index];
let row = document.createElement('tr');
row.innerHTML = `
   <td (${items.indexOf(item)})">${item.title}</td>
   <td>${item.genre}</td>
   <td>${"R" + item.price }</td>
   <td><input type="text" value="Hello World!" /></td>`;
carttable.append(row);

answered Feb 24, 2020 at 14:38

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Collectives™ on Stack Overflow

Create a textbox inside a table using Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related