javascript localStorage添加到表

Question

For an assignment I need to use javascript/jquery, but I'm new to it. I have a form with some text boxes where I can create a new animal. The animal will be added to an array called animal_list.

Animal_list will be added to localstorage and it works fine. But what I want is to load all animals from the local storage and add them to a table. The type of animals that will be stored are a cat or a dog and they also have their own table.

I have a console.log where I write the type of the animal, and this shows the right output (3 dogs, 2 cats), but they won't be added to a table.

This is my HTML code:

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

And this is my javascript/jQuery code:

$( 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);

        }
      }
    }
  });

The console in safari gives no error messages. I also tried to change

document.getElementById("#dog");

to (also for cat)

document.getElementById("dog");

but with no result.

Could someone help me with my problem?

Thanks in advance!

EDIT: I fount a typo (animal.type should be animal.Type). When changed that I got an error message in my console:

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

(typo fixed in code)

Answer 1

I used jQuery to add the objects in the localStorage to a table.

This is an example for the dog-table

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