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

        }
      }
    }
  });

safari中的控制台不提供任何错误消息。我也试图改变

document.getElementById("#dog");

to（也适用于猫）

document.getElementById("dog");

但没有结果。

有人可以帮我解决我的问题吗？

提前致谢！

修改我输入一个拼写错误（animal.type应该是animal.Type）。更改后，我在控制台中收到错误消息：

TypeError：null不是对象（评估'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>");
        }

javascript localStorage添加到表

1 个答案: