How do you create multiple table on a page with a click of a button

Question

I want to be able to create empty tables on my page with a Create table button, but can't figure out how to do it.

I've tried looking some stuff up, but most of the things I see on tables just have you making a table in your html file instead of one being created with a button.

@MurtazaHussain I don't have any code yet, i'm just trying to figure this out. — agaiuqer, Jun 13 '19 at 13:06
Welcome to Stack Overflow! You need to explain your issue in detail. Maybe add some code or add a graphical representation of the problem that will help users to understand. — Akash K., Jun 13 '19 at 13:11

score 0 · Answer 1 · answered Jun 13 '19 at 14:22

So this is how you create an empty table element. Please note that without any content and/or dimensions your table will not display anything (which is why I added the CSS part).

If that is not what you consider an empty table, please be more specific in your requirements.

document.querySelector('button').addEventListener('click', () => {
  const table = document.createElement('table');
  document.body.appendChild(table);
})

table {
  border: 4px solid red;
  height: 100px;
  width: 200px;
}

<button type="button">Create an empty table</button>

score -3 · Answer 2 · answered Jun 13 '19 at 13:07

-3

You can't do this with pure HTML, because HTML is just a markup language.

Do you know anything about Javascript? You'll probably want to hook an onclick handler to the button. You'll need the handler to create a table and insert it into the correct location in the DOM.

answered Jun 13 '19 at 13:07

zachdj

354
2
8

2

This should be a comment. – Heretic Monkey Jun 13 '19 at 14:18

How do you create multiple table on a page with a click of a button

2 Answers2