Question

我的代码是一个可编辑的数组，您可以在其中放置学生信息，并使用按钮计算每行的结果。使用2个按钮，您可以为学生添加行，为其他任务添加列。

我想添加2个按钮，1个用于在Cookie中保存已完成的数组，另一个用于在同一个数组上加载此信息。

我目前在使用Cookie保存和加载数据时被阻止。

这是我的代码：

var ass = 1;



function Grade() {
   var table = document.getElementById("Student_Table");
   var rows = table.rows;
	 
   for (var i = 1; i < rows.length; i++) {
     var cells = rows[i].cells;
     var sum = 0;
         var numbers = 0;
     for (var x = 2; x < (cells.length -1); x++) {
       var cell = cells[x];
       var addme = parseInt(cell.innerHTML);
       if(!isNaN(addme)) {       
          sum += addme;
          numbers++;
       }
     }
     var average = sum / numbers;
     rows[i].cells[x].innerHTML = "<td>" + Math.round(average) + "</td>";
     

   }
 }

function add_row() {
// Create an empty <tr> element and add it to the 1st position of the table:
var tbl = document.getElementById('Student_Table'), // table reference
        row = tbl.insertRow(tbl.rows.length),      // append table row
        i;
// insert table cells to the new row
    for (i = 0; i < tbl.rows[0].cells.length; i++) {
        createCell(row.insertCell(i));
    }
}


function add_column() {
// append column to the HTML table
    var tbl = document.getElementById('Student_Table'), // table reference
        i;
        
ass = ass += 1;
    
      for (i = 0; i < 1; i++) {
    
        tbl.rows[i].insertCell(2);
  

  
  document.getElementById('Student_Table').rows[0].cells[i+2].style.backgroundColor = "#bbdaff";
  
  
  document.getElementById('Student_Table').rows[0].cells[i+2].innerHTML = "Assignment" + (ass);   }
        
        
    // open loop for each row and append cell
    for (i = 1; i < tbl.rows.length; i++) {
    
        createCell(tbl.rows[i].insertCell(2));
  
       
    }
} 
// create DIV element and append to the table cell
function createCell(cell) {  
  // var div = document.createElement('div'); // create DIV element       
   // div.setAttribute('class', style);        // set DIV class attribute
// div.setAttribute("contenteditable", "true");
  // cell.appendChild(div);   // append DIV to the table cell
   cell.setAttribute("contenteditable", "true");
}


//buttons linking
document.getElementById('click').onclick = Grade;
document.getElementById('click2').onclick = add_row;
document.getElementById('click3').onclick = add_column;
document.getElementById('click4').onclick = save_cookie;
document.getElementById('click5').onclick = load_cookie;




//cookie part inspired from w3school
function setCookie(cname,cvalue,exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

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 "";
}


function save_cookie() {
    setCookie("array", array, 30);
    
var array = document.getElementById("Student_Table");

alert (array + " saved");

}

function load_cookie(){ }

.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-lqy6{text-align:right;vertical-align:top}
.tg .tg-baqh{background-color:#bbdaff;text-align:center;vertical-align:top}
.tg .tg-yw4l{vertical-align:top}



.myButton { margin: 20px;
	-moz-box-shadow:inset 0px 1px 0px 0px #f9eca0;
	-webkit-box-shadow:inset 0px 1px 0px 0px #f9eca0;
	box-shadow:inset 0px 1px 0px 0px #f9eca0;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f0c911), color-stop(1, #f2ab1e));
	background:-moz-linear-gradient(top, #f0c911 5%, #f2ab1e 100%);
	background:-webkit-linear-gradient(top, #f0c911 5%, #f2ab1e 100%);
	background:-o-linear-gradient(top, #f0c911 5%, #f2ab1e 100%);
	background:-ms-linear-gradient(top, #f0c911 5%, #f2ab1e 100%);
	background:linear-gradient(to bottom, #f0c911 5%, #f2ab1e 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0c911', endColorstr='#f2ab1e',GradientType=0);
	background-color:#f0c911;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #e65f44;
	display:inline-block;
	cursor:pointer;
	color:#c92200;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ded17c;
}
.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f2ab1e), color-stop(1, #f0c911));
	background:-moz-linear-gradient(top, #f2ab1e 5%, #f0c911 100%);
	background:-webkit-linear-gradient(top, #f2ab1e 5%, #f0c911 100%);
	background:-o-linear-gradient(top, #f2ab1e 5%, #f0c911 100%);
	background:-ms-linear-gradient(top, #f2ab1e 5%, #f0c911 100%);
	background:linear-gradient(to bottom, #f2ab1e 5%, #f0c911 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2ab1e', endColorstr='#f0c911',GradientType=0);
	background-color:#f2ab1e;
}
.myButton:active {
	position:relative;
	top:1px;
}

<table class="tg" id="Student_Table">
  <tr>
    <th class="tg-baqh">Student Name<br></th>
    <th class="tg-baqh">Student ID<br></th>
    <th class="tg-baqh">Assignment 1<br></th>
    <th class="tg-baqh">Final Grade<br></th>
  </tr>
  <tr>
    <td class="tg-yw4l" contenteditable="true"></td>
    <td class="tg-yw4l" contenteditable="true"></td>
    <td class="tg-lqy6" contenteditable="true"></td>
    <td></td>
  </tr>
</table>

<a href="#" class="myButton" id="click" onclick="Grade()">grade</a>

<a href="#" class="myButton" id="click2" onclick="add_row()">add row</a>

<a href="#" class="myButton" id="click3" onclick="add_column()">add column</a>

<a href="#" class="myButton" id="click4" onclick="save_cookie()">Save data</a>

<a href="#" class="myButton" id="click5" onclick="load_cookie()">Load data</a>

非常感谢您的帮助。

最佳，

埃里克

Answer 1

我实际上并没有在该代码中深入挖掘，但我想到的是：

function save_cookie() {
    setCookie("array", array, 30);

    var array = document.getElementById("Student_Table");

    alert (array + " saved");

}

首先不应该是

function save_cookie() {

    var array = document.getElementById("Student_Table");

    setCookie("array", array, 30);

    alert (array + " saved");

}

此外，我建议对这些东西进行urlencode甚至更好，从中创建一个JSON：

function save_cookie() {

    var array = document.getElementById("Student_Table");

    var json = {
           "array": array
    }

    setCookie("array", JSON.stringify(json), 30);

    alert (array + " saved");

}

在你的getCookie函数中，你应该：

if (c.indexOf(name) == 0) {
    var cstring = c.substring(name.length, c.length);

    // error handling omitted
    return (JSON.parse(cstring)).array;
}

使用Javascript在COOKIES中保存和加载HTML可编辑数组

1 个答案: