求解：大问题。呵。。。：）

刚接触JS一段时间。碰到难题，眼泪已流干，有跳楼的冲动。琢磨的很久就只完成了function addTask()。function deleteTask，function writePersonalTasksToCookie，function readPersonalTasksFromCookie均未完成。不知哪位仁兄肯不岐赐教。先行谢过了。后附问题。 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Assignment 2 </title> 
<style type="text/css"> 
<!-- 
body { 
margin-left: 0px; 
margin-top: 0px; 
margin-right: 0px; 
margin-bottom: 0px; 
} 
body,td,th { 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 12px; 
font-weight: normal; 
color: #330000; 
} .pageTitle { 
font-size: 36px; 
font-weight: bolder; 
color: #FFFFFF; 
font-family: Arial, Helvetica, sans-serif; 
background-color: #006699; 
} 
.taskPriority { 
color: #CC0000; 
width: 40px; 
float: left; 
} 
th { 
font-weight: bold; 
} 
.taskDelete { 
color: #006699; 
} 
.borderPage { 
padding: 0px; 
border-width: 1px; 
border-style: solid; 
border-color: #006699; 
} 
a:link { 
color: #006699; 
} 
a:hover { 
color: #CC0000; 
} 
--> 
</style> 
<script type="text/javascript"> 
<!-- 
// Declare GLOBAL variables 
var gTaskArray = new Array(); // Create global array to store Tasks 
var sortField = "msec" //default sort order is msec - uses the msecs of task date to sort by // Declare GLOBAL CONSTANTS 
var COOKIE_NAME = "myTasks" // name of cookie 
var COOKIE_HOURS = 24; // hours that cookie should be kept /* 
function addTask() 
Description : DESCRIBE WHAT FUNCTION DOES Passed Parameters : 
none 
Returned Values : 
none 
function addTask() {
//*** WRITE YOUR CODE HERE - to add a PERSONAL task to the global Task Array
  gTaskArray[gTaskArray.length] = new Array();
gTaskArray[gTaskArray.length - 1].title     = document.getElementById("txtTask").value;
gTaskArray[gTaskArray.length - 1].priority  = document.getElementById("selPriority").value;
gTaskArray[gTaskArray.length - 1].msec      = new Date(document.getElementById("selDay").value + " " + document.getElementById("selMonth").value + " " +document.getElementById("selYear")).getTime();
gTaskArray[gTaskArray.length - 1].date      = document.getElementById("selDay").value + " " + document.getElementById("selMonth").value + " " +document.getElementById("selYear").value;
gTaskArray[gTaskArray.length - 1].type     = "PERSONAL";
    
  // Re-write cookie with new updated To-Do list 
writePersonalTasksToCookie();

// Display updated To-Do List
    displayTasks(); return;
}
/* 
function deleteTask() 
Description : DESCRIBE WHAT FUNCTION DOES Passed Parameters : 
item - number of array item to be deleted 
Returned Values : 
none 
*/ 
function deleteTask(item) { 
//*** WRITE YOUR CODE HERE - to delete a task from the global Task Array 
// Re-write cookie with new updated To-Do list 
writePersonalTasksToCookie(); // Display updated To-Do List 
  displayTasks(); 
  
  return; 
} /* 
function writePersonalTasksToCookie() 
Description : DESCRIBE WHAT FUNCTION DOES Passed Parameters : 
none 
Returned Values : 
none 
*/ 
function writePersonalTasksToCookie() { 
var strCookie = ""; // formatted text string of PERSONAL tasks to write to cookie //*** WRITE YOUR CODE HERE - to loop through gTaskArray and create formatted text string of all PERSONAL type tasks 
// Re-write cookie with new updated To-Do list - COOKIE_NAME and COOKIE_HOURS are global constants declared above 
writeCookie(COOKIE_NAME, strCookie, COOKIE_HOURS) 
} /* 
function readPersonalTasksFromCookie() 
Description : DESCRIBE WHAT FUNCTION DOES Passed Parameters : 
none 
Returned Values : 
none 
*/ 
function readPersonalTasksFromCookie() { 
  var cookieValue = readCookie(COOKIE_NAME); 
var taskArray;   // if our cookie does exist - extract the formatted cookie string and add to the Task Array 
if(cookieValue != "") { 
//*** WRITE YOUR CODE HERE - to extract the formatted task info from the cookie string and add each task to the global Task Array 
  }   return; 
} 
/* 
function displayTasks() 
Description : PROVIDED FUNCTION 
Sorts the task array by date or priority.  
Creates the HTML code to display the tasks. 
Updates the div section "taskList" to display the new HTML table of tasks Passed Parameters : 
none 
Returned Values : 
none 
*/ 
function displayTasks() { 
  var taskHTML = ""; 
  var arrPriority = new Array("High","Med","Low");   // Sort the Task array using the provided sortArray function. 
  gTaskArray.sort(sortArray); 
  
  // Start the HTML code for the tasks - this starts the HTML code for the table 
  taskHTML += ' <table border="0" cellspacing="1" cellpadding="3">'; 
  
  //  Add a HTML table row for each task in the global task array 
  for (var i = 0; i < gTaskArray.length; i++) { 
    taskHTML += ' <tr>'; 
    taskHTML += '  <td width="65" align="center" bgcolor="#F0F0F0">' + arrPriority[gTaskArray[i].priority] + ' </td>' 
    taskHTML += '  <td width="356" bgcolor="#F0F0F0">' + gTaskArray[i].title + ' </td>' 
    taskHTML += '  <td width="136" bgcolor="#F0F0F0">' + gTaskArray[i].date + ' </td>' 
    taskHTML += '  <td width="66"  bgcolor="#F0F0F0">' + gTaskArray[i].type + ' </td>' 
    taskHTML += '  <td width="22" align="center" bgcolor="#F0F0F0"> <a href="javascript:deleteTask(' + i + ');">X </a> </td>' 
    taskHTML += ' </tr>'; 
  } 
  //  End the HTML table code 
  taskHTML += ' </table>'; 
  
  // Set the div section "taskList" to display the new HTML table just created. 
  document.getElementById("taskList").innerHTML = taskHTML; 
  
  return; 
} 

解决方案 »

  1.   

    /* 
    function addCourseTasks() 
    Description :  PROVIDED FUNCTION 
    Adds pre-set COURSE tasks to the global task array. Passed Parameters : 
    none 
    Returned Values : 
    none 
    */ 
    function addCourseTasks() { // Add pre-set tasks COURSE tasks for CIS1001 assignments to To-Do List 
    gTaskArray[gTaskArray.length] = new Array(); 
    gTaskArray[gTaskArray.length - 1].title    = "CIS1001 A1"; 
    gTaskArray[gTaskArray.length - 1].priority  = 0; 
    gTaskArray[gTaskArray.length - 1].msec      = new Date("15 August 2008").getTime(); 
    gTaskArray[gTaskArray.length - 1].date      = "15 August 2008"; 
    gTaskArray[gTaskArray.length - 1].type    = "COURSE"; 
    gTaskArray[gTaskArray.length] = new Array(); 
    gTaskArray[gTaskArray.length - 1].title    = "CIS1001 A2"; 
    gTaskArray[gTaskArray.length - 1].priority  = 0; 
    gTaskArray[gTaskArray.length - 1].msec      = new Date("17 October 2008").getTime(); 
    gTaskArray[gTaskArray.length - 1].date      = "17 October 2008"; 
    gTaskArray[gTaskArray.length - 1].type    = "COURSE"; return; 
    } 
    /* 
    function readCookie(name) 
    Description : PROVIDED FUNCTION 
    Reads the cookie specified by the passed 'name' parameter Passed Parameters : 
    name - name of cookie to be read 
    Returned Values : 
    none 
    */ 
    function readCookie(name) {   var cookieValue = ""; 
      var cookieStart = name + "="; 
    var offset; 
    var end;   if(document.cookie.length > 0) {     offset = document.cookie.indexOf(cookieStart);     if (offset != -1) {       offset += cookieStart.length;       end = document.cookie.indexOf(";", offset);       if (end == -1) end = document.cookie.length;       cookieValue = unescape(document.cookie.substring(offset, end)) 
        } 
      }   return cookieValue; } /* 
    function writeCookie(name, value, hours) 
    Description : PROVIDED FUNCTION 
    Saves a cookie specified by the passed 'name' parameter, with the passed parameters for value and hours. Passed Parameters : 
    name - name of cookie to be written 
    value - cookie value to be saved 
    hours - number of hours till cookie expires 
    Returned Values : 
    none 
    */ 
    function writeCookie(name, value, hours) {   var expire = "";   if(hours != null) { 
        expire = new Date((new Date()).getTime() + hours * 3600000); 
        expire = "; expires=" + expire.toGMTString(); 
    }   document.cookie = name + "=" + escape(value) + expire; return; 
    } /* 
    function sortTasks(field) 
    Description :  PROVIDED FUNCTION Passed Parameters : 
    field - field to sort Task array by 
    Returned Values : 
    none 
    */ 
    function sortTasks(field) { 
      // Set the new sort by field and then display the tasks - displayTasks() function will sort the tasks before displaying them 
      sortField = field; 
      displayTasks(); 
    } /* 
    function sortArray() 
    Description :  PROVIDED FUNCTION DESCRIBE WHAT FUNCTION DOES Passed Parameters : 
    a - pointer to array element 
    b - pointer to array element 
    Returned Values : 
    none 
    */ 
    function sortArray(a, b) { 
      var returnVal = 0; 
      var x = a.msec; 
      var y = b.msec; 
      
      if (sortField == "priority") { 
        x = a.priority; 
        y = b.priority; 
      } 
      
      if (x < y) { 
        returnVal = -1 
      } else if (x > y){ 
        returnVal = 1; 
      } else { 
        returnVal = 0; 
      } 
      
      return returnVal; 
    } 
    --> 
    </script> 
    </head> 
      

  2.   

    /*虽然后面这部分不重要但为保持该文件完整性，还是传上来*/
    <body onload="addCourseTasks();readPersonalTasksFromCookie();displayTasks();"> 
    <table border="0" align="center" cellpadding="10" cellspacing="0" class="borderPage"> 
      <tr> 
        <td align="center" class="pageTitle">To-Do List  </td> 
      </tr> 
      <tr> 
        <td> <form id="fmPics" name="fmPics" method="get" action=""> 
            <table width="100%" border="0" cellspacing="0" cellpadding="5"> 
              <tr> 
                <td> 
                  <legend> </legend>              
                  <table border="0" cellpadding="3" cellspacing="1"> 
                    <tr> 
                      <th>Priority </th> 
                      <th>New task </th> 
                      <th>Due Date </th> 
                      <td>&nbsp; </td> 
                    </tr> 
                    <tr> 
                      <td valign="middle" nowrap="nowrap"> <select name="selPriority" id="selPriority"> 
                        <option value="0">High </option> 
                        <option value="1">Med </option> 
                        <option value="2">Low </option> 
                      </select> </td> 
                      <td align="right" valign="middle" nowrap="nowrap"> 
    <input name="txtTask" type="text" class="numFld" id="txtTask" size="40"  /> </td> 
                      <td valign="bottom"> <select name="selDay" id="selDay"> 
                        <option value="1">1 </option> 
                        <option value="2">2 </option> 
                        <option value="3">3 </option> 
                        <option value="4">4 </option> 
                        <option value="5">5 </option> 
                        <option value="6">6 </option> 
                        <option value="7">7 </option> 
                        <option value="8">8 </option> 
                        <option value="9">9 </option> 
                        <option value="10">10 </option> 
                        <option value="11">11 </option> 
                      <option value="12">12 </option> 
                        <option value="13">13 </option> 
                        <option value="14">14 </option> 
                        <option value="15">15 </option> 
                        <option value="16">16 </option> 
                        <option value="17">17 </option> 
                        <option value="18">18 </option> 
                        <option value="19">19 </option> 
                        <option value="20">20 </option> 
                        <option value="21">21 </option> 
                        <option value="22">22 </option> 
                        <option value="23">32 </option> 
                        <option value="24">24 </option> 
                        <option value="25">25 </option> 
                        <option value="26">26 </option> 
                        <option value="27">27 </option> 
                        <option value="28">28 </option> 
                        <option value="29">29 </option> 
                        <option value="30">30 </option> 
                        <option value="31">31 </option> 
                        </select> 
                        <select name="selMonth" id="selMonth"> 
                          <option value="January">January </option> 
                          <option value="February">February </option> 
                          <option value="March">March </option> 
                          <option value="April">April </option> 
                          <option value="May">May </option> 
                          <option value="June">June </option> 
                          <option value="July">July </option> 
                          <option value="August">August </option> 
                          <option value="September">September </option> 
                          <option value="October">October </option> 
                          <option value="November">November </option> 
                          <option value="December">December </option> 
                        </select> 
                        <select name="selYear" id="selYear"> 
                          <option value="2008">2008 </option> 
                          <option value="2009">2009 </option> 
                          <option value="2010">2010 </option> 
                        </select>                  </td> 
                      <td valign="bottom"> <input name="btnAddTask" type="button" id="btnAddTask" value="Add" onclick="addTask();"/> </td> 
                    </tr> 
                </table> </td> 
              </tr> 
            </table> 
        </form>    </td> </tr> 
      <tr> 
        <td> 
          <table border="0" cellspacing="1" cellpadding="3"> 
          <tr> 
            <th width="65" bgcolor="#E8F3FF"> <a href="javascript:sortTasks('priority')">Priority </a> </th> 
            <th width="356" bgcolor="#E8F3FF">Task </th> 
            <th width="136" bgcolor="#E8F3FF"> <a href="javascript:sortTasks('date')">Due Date </a> </th> 
            <th width="66" bgcolor="#E8F3FF">Type </th> 
            <th width="22" bgcolor="#E8F3FF">&nbsp; </th> 
          </tr> 
          </table> 
          <div id="taskList">&nbsp; </div> 
        </td> 
      </tr> 
    </table> 
    </body> 
    </html>
      

  3.   

    实在不好意思。确实太大了。这些CODES其他部分都是正常的。就是要补全几个FUNCTION。
      

  4.   

    怎么这种添加记录的操作用JS来实现呢? 一刷新就没了呀.而且记录保存不了为什么不用.net 或asp, jsp + SQL或access呢?用数据库保存多好呀