insertRow JavaScript не распознается

Я новичок в javascript, но все же стараюсь самостоятельно исправить проблему. Тем не менее, я расстроился, потому что одна и та же функция работает для немного другого HTML без tbody и thead.insertRow JavaScript не распознается

Ошибка, которую я получаю, -> Uncaught TypeError: Невозможно прочитать свойство 'insertRow' из null.

Где я ошибаюсь? Также, возможно, есть лучший способ добавить строку таблицы? Я попробовал .append, но это не сработало для меня.

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"; 

});

источник

2014-12-09 Roland Jegorov

Вы определили ed 'myTable' как класс. Измените свой тег таблицы на '

' – Papa

@Papa Спасибо! Моя вина действительно. :/Но если я поставлю insertRow (-1); это говорит о Неожиданный токен ILLEGAL. Как я читал, он должен поставить строку как последнюю, не так ли? –

@Papa Спасибо и @Calummm! Теперь это работает! –

ответ

всего несколько опечаток, отсутствует идентификатор на вашем столе и смешивание JQuery неправильно.

$("#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>

источник

2014-12-09 03:55:49 Calummm

Спасибо! :) Теперь я могу продолжить обучение! –

не строго связан с вопросом, но я оказался здесь за то, что «неперехваченным TypeError: table.insertRow не является функцией» ошибка. У вас может быть такая же проблема. Если это так:

Если вы хотите использовать

row.insertCell(0);

и вы получите прежнюю ошибку, убедитесь, что не получить элемент с помощью JQuery:

НЕ

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

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

источник

2018-02-11 16:37:48 Loaderon

помог мне, ура. –

Смежные вопросы