Question

我正在尝试在这里学习cookie，但我似乎无法用表格来解决它们。

我想保存表中的数据，然后能够使用相同的数据加载表。

目前，我的代码应保存数据，然后警报应该包含已保存但无法正常工作的数据。谁能告诉我哪里出错了？

PS。我试图用旧学校的javascript而不是jquery来做。

HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <table style="width:100%" id="myTable">
    <tr>
      <th>Name</th>
      <th>ID number</th>
      <th>Assignment 1</th>
      <th>Assignment 2</th>
      <th>Assignment 3</th>
      <th>Assignment 4</th>
      <th>Assignment 5</th>
      <th>Final Average Grade</th>
    </tr>
    <tr>
      <td id="left">Tom Malarkey</td>
      <td id="left">95243654</td>
      <td contenteditable="true">-</td>
      <td contenteditable="true">-</td>
      <td contenteditable="true">-</td>
      <td contenteditable="true">-</td>
      <td contenteditable="true">-</td>
      <td>-</td>
    </tr>
  </table>
  <button type="submit" class="button" onclick=calculateAvg()>
    Submit
  </button>
  <button type="submit" class="button" onclick="saveTable()">
    Save
  </button>
  <button type="submit" class="button" onclick="LoadTable()">
    Load
  </button>
  <script src="script.js"></script>
</body>
</html>

的script.js

function calculateAvg() {
  var k = document.getElementById("myTable");

  for (var i = 1; i < k.rows.length; i++) {
    var sumOfGrades = 0;

    for (var j = 2; j < k.rows[0].cells.length - 1; j++) {
      if (k.rows[i].cells[j].innerHTML != "-") {
        sumOfGrades += parseInt(k.rows[i].cells[j].innerHTML);
      }
    }
    var avg = k.rows[i].cells[j].innerHTML = Math.round(sumOfGrades / 5);
    k.rows[i].cells[j].innerHTML = Math.round(avg) + "%";

    if (avg <= 40) {
      k.rows[i].cells[j].style.background = "red";
      k.rows[i].cells[j].style.color = "white";
    } else {
      k.rows[i].cells[j].style.background = "white";
      k.rows[i].cells[j].style.color = "black";
    }
  }
}

function saveTable() {
  var table = document.getElementById("myTable");
  var num = table.rows[0].cells.length; // amount of rows
  var data = '';
  for (var i = 1; i < table.rows.length; i++) {
    for (var j = 0; j < table.rows[0].cells.length - 1; j++) {
      data += table.rows[i].cells[j].innerHTML + ";";
    }
  }
  data = table.rows.length + ";" + table.rows[0].cells.length + ";" + data.substring(0, data.length);
  setCookie("data", data, 60);
  alert("Cookie Saved");
}

function setCookie(cname, cvalue, exdays) {

  var d = new Date();
  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  var expires = "expires=" + d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function LoadTable() {
  var data = getCookie("data");
  if (data != "") {
    alert("The table says:" + data);
  } else {
    alert("There is no data in the table");
  }
}

function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

当我点击“加载”按钮时，它会显示“表格显示：2”

Answer 1

在saveTable函数的这一行，您将覆盖data

中设置的值

data = table.rows.length + ";" + table.rows[0].cells.length + ";" + data.substring(0, data.length);

您需要使用+=

添加值

data += table.rows.length + ";" + table.rows[0].cells.length + ";" + data.substring(0, data.length);

使用cookie设置和加载表数据

1 个答案: