Table in HTML using JavaScript [duplicate]

Question

I am not familiar with JavaScript and HTML. Just want to build a Table with JavaScript in HTML. I am following some instructions, part of code is as bellow. would you please let me know what is the problem that the table is not appearing?

    tb1= document.createElement('table');
    var tr = tb1.insertRow();
    var Cell1 = tr.insertCell(0),
    var Cell2 = tr.insertCell(1),
    var Cell3 = tr.insertCell(2),
    var Cell4 = tr.insertCell(3);
    cell1.innerHTML = "11";
    cell2.innerHTML = "11";
    cell3.innerHTML = "11";
    cell4.innerHTML = "11";
    tb1.appendChild(MyTable);

    <table id="MyTable" width="100%" ></table>

Java is not javascript. Please change the title and content so people arent confused. — Achtung
– Achtung, Commented Jul 24, 2020 at 12:45
Maybe you should open your browser's console and see the errors you're getting. — Federico klez Culloca
– Federico klez Culloca, Commented Jul 24, 2020 at 12:51
A couple of quick suggestions: Cell1 and cell1 are different things. And so are ; and ,. — Federico klez Culloca
– Federico klez Culloca, Commented Jul 24, 2020 at 12:53
There is more wrong with this than right. Throw this all away, read the duplicate, start again. — Liam
– Liam, Commented Jul 24, 2020 at 12:57

Liam · Accepted Answer · 2020-07-24 13:17:21Z

1

You don't have to use document.createElement('table'); if the element is in your html, use getElementById("MyTable");
You are using commas instead of semicolon in the end of lines;

There is an example that could make you understand better:

window.onload = function() {
   var table = document.getElementById("myTable");
   var row = table.insertRow(0);
   var cell1 = row.insertCell(0);
   cell1.innerHTML = "1";
    
   var row = table.insertRow(1);
   var cell1 = row.insertCell(0);
   cell1.innerHTML = "1";
    
   var row = table.insertRow(2);
   var cell1 = row.insertCell(0);
   cell1.innerHTML = "1";
};

table, td {
          border: 1px solid black;
        }

 <table id="myTable"> </table>

edited Jul 24, 2020 at 13:17

Liam

30k28 gold badges143 silver badges206 bronze badges

answered Jul 24, 2020 at 13:11

Murilo Góes de Almeida

1,6686 gold badges22 silver badges44 bronze badges

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

Comments

Shivaji Mutkule · Accepted Answer · 2020-07-24 12:51:49Z

-2

var div= document.getElementById('MyTableContainer');
var tb1= document.createElement('table');
var tr = tb1.insertRow();
var cell1 = tr.insertCell(0);
var cell2 = tr.insertCell(1);
var cell3 = tr.insertCell(2);
var cell4 = tr.insertCell(3);
cell1.innerHTML = "11";
cell2.innerHTML = "11";
cell3.innerHTML = "11";
cell4.innerHTML = "11";
div.appendChild(tb1);

#MyTable > table {
  width: 100%;
}

td {
border: 1px solid;
}

<div id="MyTableContainer" width="100%" ></div>

answered Jul 24, 2020 at 12:51

Shivaji Mutkule

1,2981 gold badge17 silver badges30 bronze badges

1 Comment

Liam Over a year ago

This could be a good answer but you need to do more than just vomit some code into it. As it stands it's just a poor answer to a poor question

Collectives™ on Stack Overflow

Table in HTML using JavaScript [duplicate]

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related