javascript localStorage добавить в таблицу

Question

Для назначения мне нужно использовать javascript/jquery, но я новичок в нем. У меня есть форма с некоторыми текстовыми полями, где я могу создать новое животное. Животное будет добавлено в массив под названием animal_list.

Animal_list будет добавлен в localstorage, и он отлично работает. Но я хочу загрузить всех животных из локального хранилища и добавить их в таблицу. Тип животных, которые будут храниться, это кошка или собака, и у них также есть собственный стол.

У меня есть console.log, где я пишу тип животного, и это показывает правильный результат (3 собаки, 2 кошки), но они не будут добавлены в таблицу.

Это мой HTML-код:

<div class="row"> 
    <div class="col-lg-6"> 
     <h3>Honden</h3> 
     <table id="dog" class="table table-hover table-striped table-condensed"> 
     <thead> 
      <tr> 
      <th>CRN</th> 
      <th>Name</th> 
      <th>DoB</th> 
      <th>Gender</th> 
      <th>Last Walk Date</th> 
      </tr> 
     </thead> 
     </table> 
    </div> 
    <div class="col-lg-6"> 
     <h3>Katten</h3> 
     <table id="cat" class="table table-hover table-striped table-condensed"> 
     <thead> 
      <tr> 
      <th>CRN</th> 
      <th>Name</th> 
      <th>DoB</th> 
      <th>Gender</th> 
      <th>Bad Habits</th> 
      </tr> 
     </thead> 
     </table> 
    </div> 
    </div> 

И это мой JavaScript/JQuery код:

$(document).ready(function(){ 
    /* Eerst alle animals ophalen */ 
    var animal_list = JSON.parse(localStorage.getItem("animals")); 

    if (Array.isArray(animal_list)) { 
     for (var i = 0; i < animal_list.length; ++i) 
     { 
     /* get a specific animal from our array so we can use it's properties */ 
     var animal = animal_list[i]; 

     console.log("Loading next animal..."); 
     console.log("Animal type: " + animal.Type); 

     if(animal.Type == "dog") 
     { 
      // animal is a dog 

      var table = document.getElementById("#dog"); 

      row = table.insertRow(i+1); 
      Crn = row.insertCell(0); 
      Name = row.insertCell(1); 
      DoB = row.insertCell(2); 
      Gender = row.insertCell(3); 
      Special = row.insertCell(4); 

      Crn.innerHTML(animal.Crn); 
      Name.innerHTML(animal.Name); 
      DoB.innerHTML(animal.Dob); 
      Gender.innerHTML(animal.gender); 
      Special.innerHTML(animal.Special); 

      save(Crn.innerHTML); 
      save(Name.innerHTML); 
      save(DoB.innerHTML); 
      save(Gender.innerHTML); 
      save(Special.innerHTML); 



     } 
     if(animal.Type == "cat") 
     { 
      // animal is a cat 
      var table = document.getElementById("#cat"); 

      row = table.insertRow(i+1); 
      Crn = row.insertCell(0); 
      Name = row.insertCell(1); 
      DoB = row.insertCell(2); 
      Gender = row.insertCell(3); 
      Special = row.insertCell(4); 

      Crn.innerHTML(animal.Crn); 
      Name.innerHTML(animal.Name); 
      DoB.innerHTML(animal.Dob); 
      Gender.innerHTML(animal.gender); 
      Special.innerHTML(animal.Special); 

      save(Crn.innerHTML); 
      save(Name.innerHTML); 
      save(DoB.innerHTML); 
      save(Gender.innerHTML); 
      save(Special.innerHTML); 

     } 
     } 
    } 
    }); 

Консоль в сафари не дает никаких сообщений об ошибках. Я также попытался изменить

document.getElementById("#dog"); 

к (также для кошки)

document.getElementById("dog"); 

, но без результата.

Может ли кто-нибудь помочь мне с моей проблемой?

Заранее благодарен!

EDIT: У меня есть опечатка (animal.type должен быть animal.Type). Когда изменилось, что я получил сообщение об ошибке в моей консоли:

TypeError: null is not an object (evaluating 'table.insertRow')

(опечатка исправлена ​​в коде)

Answer 1

Я использовал JQuery, чтобы добавить объекты в LocalStorage к столу.

Это пример для собаки стола

if(animal.Type == "dog") 
     { 
      // animal is a dog 
      var table = document.getElementById("dog"); 

      $("#dog").append("<tr><td>" + animal.Crn + "</td><td>" + animal.Name + "</td><td>" + animal.Dob +"</td><td>" + animal.Gender + "</td><td>" + animal.Special + "</td></tr>"); 
     }