I am trying to add table in HTML using JavaScript

Question

$(document.ready(function() {
  var laterbox = document.getElementById('laterbox');
  var tabl = document.createElement('table');
  var trh = document.createElement('tr');
  var trd = document.createElement('tr');
  var txt = document.createTextNode('book_id');
  var tr1 = document.createElement('th');
  tr1.appendChild(txt);
  trh.appendChild(tr1);
  tabl.appendChild(trh);
  tabl.appendChild(trd);
  laterbox.appendChild(tabl);
}));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="laterbox">
  <table>
    <tr>
      <th>aa</th>
      <th>bb</th>
    </tr>
    <tr>
    </tr>
  </table>
</div>

But the second table does't display, I don't know why. I tried many times but could not find the error. You can see the output here: https://codepen.io/sandesh_bafna8/pen/BwQZGv

Others have already answered the question so I'm just leaving some general advice for debugging JS here. Inspect the output of your browsers console when running your script, errors like this get flagged immediately. Also use more descriptive variable names - it might work on a small script like this, but figuring out what tabl1, tr1 and stuff like that do in a bigger codebase is a real pain and leads to more time spent figuring it out than the time it would take to type tableToInsert or tableRow. :) — ppajer
– ppajer, Commented Sep 29, 2017 at 6:48

Shadow Fiend · Accepted Answer · 2017-09-29 06:43:16Z

2

You don't have ) in your document and extra ) at the end. Remove it and it will work..

  $(document).ready(function(){
  var laterbox=document.getElementById('laterbox');
        var tabl=document.createElement('table');
        var trh=document.createElement('tr');
    var trd=document.createElement('tr');
   var txt=document.createTextNode('book_id');
   var tr1=document.createElement('th');
 tr1.appendChild(txt);
 trh.appendChild(tr1);
  tabl.appendChild(trh);
  tabl.appendChild(trd);
  laterbox.appendChild(tabl);
   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="laterbox">
     <table>
       <tr>
         <th>aa</th>
         <th>bb</th>
        </tr>
       <tr>
       </tr>
     </table>
    </div>

Tip: If your code is not working try to look at the console if there is an error.. Missing or extra bracket and parenthesis will be displayed as an error in there..

answered Sep 29, 2017 at 6:43

Shadow Fiend

1,8291 gold badge11 silver badges14 bronze badges

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

2 Comments

sandesh bafna Over a year ago

ya syntax was correct i missed it, one more error was i missed jquery link

Shadow Fiend Over a year ago

@sandeshbafna If this solve your problem just mark it as the answer. So that this question would be closed and of course +rep for both of us..

kyun · Accepted Answer · 2017-09-29 06:43:00Z

$(document).ready(function() {
  var laterbox = document.getElementById('laterbox');
  var tabl = document.createElement('table');
  var trh = document.createElement('tr');
  var trd = document.createElement('tr');
  var txt = document.createTextNode('book_id');
  var tr1 = document.createElement('th');
  tr1.appendChild(txt);
  trh.appendChild(tr1);
  tabl.appendChild(trh);
  tabl.appendChild(trd);
  laterbox.appendChild(tabl);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="laterbox">
  <table>
    <tr>
      <th>aa</th>
      <th>bb</th>
    </tr>
    <tr>
    </tr>
  </table>
</div>

$(document.ready(function() { => $(document).ready(function() {

P.S. · Accepted Answer · 2017-09-29 06:44:53Z

You have some typo errors:

$(document.ready(function() { should be $(document).ready(function() {
Closing })); should be });

Here is the corrected code:

$(document).ready(function() {
  var laterbox=document.getElementById('laterbox');
  var tabl=document.createElement('table');
  var trh=document.createElement('tr');
  var trd=document.createElement('tr');
  var txt=document.createTextNode('book_id');
  var tr1=document.createElement('th');
  
  tr1.appendChild(txt);
  trh.appendChild(tr1);
  tabl.appendChild(trh);
  tabl.appendChild(trd);
  laterbox.appendChild(tabl);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="laterbox">
     <table>
       <tr>
         <th>aa</th>
         <th>bb</th>
       </tr>
       <tr>
       </tr>
     </table>
</div>

Collectives™ on Stack Overflow

I am trying to add table in HTML using JavaScript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related