insertRow JavaScript not recognized

Question

I'm new to javascript but still tend to try fixing an issue myself. However, I got frustrated because the same function works for a slightly different HTML without tbody and thead.

The error I get is --> Uncaught TypeError: Cannot read property 'insertRow' of null.

Where am I wrong? Also probably there is a better way to add a table row? I tried .append but it did not work for me.

HTML

<table class="table table-striped myTable">
    <button class="btn btn-primary btn-lg" id="addTableRow">Add table row</button>
    <thead>
        <tr>
            <th>Name</th>
            <th>Surname</th>
            <th>Email</th>
            <th>City</th>
            <th>Sex</th>
            <th>Date</th>
            <th>Time</th>
        </tr>
    </thead>
    <tbody> 
        <tr id="firstRow">
            <td>John</td>
            <td>Morgan</td>
            <td>[email protected]</td>
            <td>London</td>
            <td>Male</td>
            <td>09.12.14</td>
            <td>04:17 a.m.</td>
        </tr>
    </tbody>
</table>

JavaScript

$("#addTableRow").click( function(){

var table = document.getElementById("myTable");
var row = table.insertRow(0);

var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);

cell1.innerHTML = "Text-1";
cell2.innerHTML = "Text-2";
cell3.innerHTML = "Text-3";
cell4.innerHTML = "Text-4";
cell5.innerHTML = "Text-5";
cell6.innerHTML = "Text-6";

});

You've defined myTable as a class. Change your table tag to <table id="myTable" class="table table-striped"> — Papa
– Papa, Commented Dec 9, 2014 at 3:54
@Papa Thank you! My fault really. :/ But if I put insertRow (-1); it says Unexpected token ILLEGAL. As I have read it should put the row as the last one, right? — Roland Jegorov
– Roland Jegorov, Commented Dec 9, 2014 at 3:58

Calummm · Accepted Answer · 2014-12-09 04:02:31Z

Just a few typos, missing ID on your table and mixing jQuery incorrectly.

$("#addTableRow").click( function () {      
  var row = $("<tr>");

  row.append($("<td>Text-1</td>"))
     .append($("<td>Text-2</td>"))
     .append($("<td>Text-3</td>"))
     .append($("<td>Text-4</td>"))
     .append($("<td>Text-5</td>"))
     .append($("<td>Text-6</td>"))
     .append($("<td>Text-7</td>"));
 
  $("#myTable tbody").append(row);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table id="myTable" class="table table-striped myTable">
            <button class="btn btn-primary btn-lg" id="addTableRow">Add table row</button>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Surname</th>
                    <th>Email</th>
                    <th>City</th>
                    <th>Sex</th>
                    <th>Date</th>
                    <th>Time</th>
                </tr>
            </thead>
            <tbody> 
                <tr id="firstRow">
                    <td>John</td>
                    <td>Morgan</td>
                    <td>[email protected]</td>
                    <td>London</td>
                    <td>Male</td>
                    <td>09.12.14</td>
                    <td>04:17 a.m.</td>
                </tr>
            </tbody>
        </table>

Alvaro Rodriguez Scelza · Accepted Answer · 2018-02-11 16:37:48Z

6

Not strictly related to the question, but I ended up here for having the "Uncaught TypeError: table.insertRow is not a function" error. You may be having the same problem. If so:

If you want to use

row.insertCell(0);

and you receive the former error, be sure not to get the element by using jquery:

DO NOT

let table = $("#peopleTable");
let newRow = table.insertRow(0);

DO

let table = document.getElementById("peopleTable");
let newRow = table.insertRow(0);

answered Feb 11, 2018 at 16:37

Alvaro Rodriguez Scelza

4,2743 gold badges37 silver badges57 bronze badges

1 Comment

sunsetjunks Over a year ago

.insertRow does not work on a jquery-fetched table, that is right.

Collectives™ on Stack Overflow

insertRow JavaScript not recognized

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related