Javascript add button to table

Question

This is part of my code for the table. it works but I would like to add button

var html = "<table>";

for(var i=0; i<prodArray.length; ++i){
  htmlStr += "<td>" + prodArray[i].name + "</td>";
  htmlStr += "<tr>";
  htmlStr += "<td><img width=200 height=200 src='" + prodArray[i].image_url + 
 "'></td>";
  htmlStr += "<td>" + prodArray[i].price + " coins" + "</td>";
  // This bit with the button is not working
  htmlStr += "<td><button type=button> Click Me!</button"'></td>";
  htmlStr += "</tr>";
}

Please help.

For one thing, you've got var html = '<table>';, but then you add to htmlStr, a different variable. It would be better if you could use Stack Snippets to provide an minimal reproducible example. — Heretic Monkey
– Heretic Monkey, Commented Feb 5, 2019 at 21:36
You have some syntactical issues on line 8. It should be "<td><button type=button> Click Me!</button></td>"; without the quote marks inside the </button> tag — Russ J
– Russ J, Commented Feb 5, 2019 at 21:36

Aziz.G · Accepted Answer · 2019-02-05 21:42:34Z

2

Is better to use `` so it can be easy to read

const prodArray = [{
  name: "user3",
  image_url: "https://picsum.photos/200/300",
  price: "100"
}, {
  name: "user2",
  image_url: "https://picsum.photos/200/300",
  price: "100"
}];

var htmlStr = "<table>";

prodArray.map((el, index) => {
  htmlStr += `<td>" ${el.name}"</td>`;
  htmlStr += `<tr>`;
  htmlStr += `<td><img width=200 height=200 src=" ${el.image_url}"></td>`;
  htmlStr += `<td> ${el.price} coins</td>`;
  htmlStr += `<td><button type=button> Click Me!</button></td>`;
  htmlStr += `</tr>`;
})


htmlStr += `</table>`;

document.getElementById("table").innerHTML = htmlStr;

<div id="table"> </div>

answered Feb 5, 2019 at 21:42

Aziz.G

3,7913 gold badges21 silver badges38 bronze badges

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

Comments

rgamec · Accepted Answer · 2019-02-05 21:39:30Z

0

There's a small syntax error breaking your <button> tag.

Try this modified code below. Also take care with the variable naming, you're declaring the var "html" but then refer to "htmlStr" in your for-loop.

htmlStr += "<td><button type=\"button\"> Click Me!</button></td>";

You might find this page on w3schools useful for more details on the <button> tag.

answered Feb 5, 2019 at 21:39

rgamec

11 bronze badge

Comments

A. Meshu · Accepted Answer · 2019-02-05 21:39:32Z

0

You escaping the quote. Try this:

htmlStr += "<td><button type='button'> Click Me!</button></td>";

answered Feb 5, 2019 at 21:39

A. Meshu

4,1782 gold badges24 silver badges35 bronze badges

Collectives™ on Stack Overflow

Javascript add button to table

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related