javascript localStorage 添加到表答案

【问题标题】：javascript localStorage add to tablejavascript localStorage 添加到表
【发布时间】：2015-04-28 16:57:05
【问题描述】：

对于作业，我需要使用 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'）

（代码中的错字已修复）

【问题讨论】：

在if 声明之前尝试console.log(Array.isArray(animal_list)));
提示：乍一看，似乎对动物的内脏进行了很多操作。在现实生活中，你不需要切碎你的宠物来将它从一个地方移动到另一个地方，而在 JS 中，通常有一种方法可以移动数据结构或 HTML 块，只需一条语句即可知道内部结构，而是复制整个事物，无论它是什么。

标签： javascript jquery html

【解决方案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>");
        }

【讨论】：