Question

我正在尝试研究如何使用cookie从表中保存和加载数据。

我已经能够将数据保存到cookie中，但加载功能不起作用。

关于如何使这项工作的任何想法？

基本上，我希望cookie使用＆＃34; save＆＃34;来保存表中的数据。按钮。然后你可以搞乱表格和＃34;加载＆＃34;按钮会将其恢复到保存时的状态。

<html>
<head>
</head>
<body>

<table style="width:100%" id="myTable">
   <tr>
    <th>Col 1</th>
    <th >Col 2</th> 
    <th >Col 3</th>
    <th>Col 4</th>
  </tr>
  <tr>
    <td contenteditable="true" id="left">-</td>
    <td contenteditable="true" id="left">-</td>
    <td contenteditable="true">-</td>
    <td>-</td>
  </tr>

</table>
<p id = "paragraph">

</p>

<button type= "submit" class="button" onclick="addRow()">
  Add Row
</button>

<button type= "submit" class="button" onclick="addCol()">
  Add Col
</button>

<button type= "submit" class="button" onclick="saveTable()">
  Save
</button>

<button type= "submit" class="button" onclick="LoadTable()">
  Load
</button>

<script>
function addRow()
{
    var table = document.getElementById("myTable");
  var endOfRows = table.rows.length; // length of rows
  var row = table.insertRow(endOfRows);
  var endOfCols = table.rows[0].cells.length; // end of cols

  for(var i = 0; i< endOfCols; i++)
  {
    var cell = row.insertCell(i);
        cell.innerHTML = "-";
    if( i == endOfCols-1)
    {
        cell.contentEditable = "false";
    }
    else
    {
        cell.contentEditable = "true";
    }

    if(i > 1)
    {
        cell.style.textAlign = "right";
    }
    else
    {
        cell.style.textAlign = "left";
    }
  }
}
function addCol()
{
    var table = document.getElementById("myTable");
    var rowLength = table.rows.length;
  var endOfCol = table.rows[0].cells.length;
    for(var i = 0; i < rowLength; i++)
        {
             var firstRow = document.getElementById("myTable").rows[i];
         var cell = firstRow.insertCell(endOfCol-1);
       cell.contentEditable = "true"
       if(i == 0)
         {
        cell.innerHTML = "-";
        cell.style.textAlign = "center";
            cell.style.backgroundColor = "black";
        cell.style.color = "white";
        cell.style.fontWeight = "600";
       }
       else
       {
        cell.innerHTML = "-";
       }

        }
}

function saveTable()
{
     var table = document.getElementById("myTable");
     var noOfRows = table.rows[0].cells.length; // amount of cols
     var noOfCols = table.rows.length;
     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 + ",";
          }
     }
   setCookie("data", data, noOfCols, noOfRows, 60);
   alert("Cookie Saved");
}

function setCookie(cname, cvalue, noOfRows, noOfCols, 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 table = document.getElementById("myTable");

    var rowLength = table.rows.length;
  var endOfCol = table.rows[0].cells.length;
  var data = getCookie("data");  
  var array = data.split(',');
  var count = 0;
  for(var i =1;i<rowLength;i++)
  {
    for(var j = 0; j < endOfCol-1; j++)
    {       
      table.rows[i].cells[j].innerHTML = array[count];
      count++;
    }
  }
}

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

PS。我需要在最后一列添加该行中其他列的数字时执行此操作，因此我们希望在添加数据时跳过此列，也不保存此单元格中的任何内容。

从保存的cookie加载表

0 个答案: