Javascript 'Element must be a table'

Asked Dec 11 '18 at 05:32

Active Feb 02 '19 at 09:25

Viewed 1,001 times

1

I am using this tablesorter: https://github.com/tristen/tablesort

However, when I view this page I'm not able to sort the columns. Chrome dev tools shows `Uncaught Error: Element must be a table at new Tablesort (tablesort.js:6) at mytable.html:12`

I'm assuming this table:

`<table id='mytable'>`

and this code

document.getElementById('mytable')

are referencing the same 'mytable'. I've based that assumption on 'table-id' as shown here: http://tristen.ca/tablesort/demo

<!DOCTYPE html> <html> <head> <script src='./src/tablesort.js'></script> <script src='./src/sorts/tablesort.number.js'></script> <script src='./src/sorts/tablesort.date.js'></script> <link href='./demo/style.css' rel='stylesheet'> <link href='tablesort.css' rel='stylesheet'> </head> <body> <script> new Tablesort(document.getElementById('mytable')); </script> <table id='mytable' class="sort" border = "1"> <thead> <tr> <th>Name</th> <th data-sort-method='number'>Age</th>  </tr> <tr> <td>Ramesh Raman</td> <td>22</td> </tr> <tr> <td>Shabbir Hussein</td> <td>32</td> </tr> </thead> </table> </body> </html>

javascript jquery html webpage tablesort

edited Feb 02 '19 at 09:25
Jack Bashford

38,499

10

36

67

asked Dec 11 '18 at 05:32
me2017

29

2

The table doesn't exist yet when you call `document.getElementById('mytable')`. See [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) – Felix Kling Dec 11 '18 at 05:34

Three suggestions: 1) the demo .html templates all use `

`. Perhaps you can try the same, and see if it works? 2) Debug the error by setting a breakpoint in Chrome Developer Tools, and work your way backwards to the solution. ... AND ... 3) Move your Javascript to the BOTTOM of your file.
– FoggyDay Dec 11 '18 at 05:40

Question

I am using this tablesorter: https://github.com/tristen/tablesort

However, when I view this page I'm not able to sort the columns. Chrome dev tools shows Uncaught Error: Element must be a table at new Tablesort (tablesort.js:6) at mytable.html:12

I'm assuming this table:

<table id='mytable'>

and this code

document.getElementById('mytable')

are referencing the same 'mytable'. I've based that assumption on 'table-id' as shown here: http://tristen.ca/tablesort/demo

<!DOCTYPE html>
<html>

<head>
 <script src='./src/tablesort.js'></script>
 <script src='./src/sorts/tablesort.number.js'></script>
 <script src='./src/sorts/tablesort.date.js'></script>
 <link href='./demo/style.css' rel='stylesheet'>
 <link href='tablesort.css' rel='stylesheet'>
</head>
<body>
 <script> new Tablesort(document.getElementById('mytable')); </script>
 <table id='mytable' class="sort" border = "1">
 <thead>
 <tr>

  <th>Name</th>
  <th data-sort-method='number'>Age</th>
  <!-- <th>Age</th> -->
 </tr>
 <tr>
  <td>Ramesh Raman</td>
  <td>22</td>
 </tr>
 <tr>
  <td>Shabbir Hussein</td>
  <td>32</td>
 </tr>
 </thead>
 </table>

</body>
</html>

The table doesn't exist yet when you call `document.getElementById('mytable')`. See [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Felix Kling, Dec 11 '18 at 05:34

score 1 · Answer 1 · answered Dec 11 '18 at 05:37

1

It's not working because the script tag is loaded before the body. Put the code in a window.onload:

window.onload = function() {
    new Tablesort(document.getElementById('mytable'));
}

You could alternatively put the script tags at the bottom of the body, because it would be loaded last and therefore be able to find the table.

answered Dec 11 '18 at 05:37

Jack Bashford

38,499
10
36
67

I have placed the – me2017 Dec 11 '18 at 05:54

1 Answers1