<script>
   var counter=0;
   //二維數組構造函數
   function Array2(m,n)
   {
      var arr=new Array(m);
	  for(var i=0;i<m;i++)
      {
        var arrtmp=new Array(n);
        arr[i]=arrtmp;
      }
      return arr;
   }
   var arrstudent=new Array2(1,4)
   var arr=new Array(4);
   /* 將輸入的數據存入數組
     同時按成績降序排列顯示
   */
   function toarr()
   {
	    if(event.keyCode==13)
		{
		    var id=document.forms[0].stunum.value;
		    var name=document.forms[0].stuname.value;
		    var sclass=document.forms[0].stuclass.value;
		    var score=document.forms[0].stumark.value;
			arrstudent[counter]=new Array(id,name,sclass,score);
			counter++;
			document.forms[0].stunum.value="";
			document.forms[0].stuname.value="";
			document.forms[0].stumark.value="";
			document.forms[0].stunum.focus();
			listAll();
		}
   }
   //以表格的形式輸出數組中的數據
   function listAll()
   {
      sortBy(3);//按成績排序
	  var str="<table cellpadding='0' cellspacing='0' border='1'>";
	  for(var i=0;i<counter;i++)
	  {
	     str+="<tr>"
		 for(var j=0;j<4;j++)
		 {
		    str+="<td>"+arrstudent[i][j]+"</td>";
		 }
		 str+="</tr>";
	  }
	  str+="</table>";
	  document.getElementById("list").innerHTML=str;
   }
   /*
      二維數組的排序操作
	  可以按數組中的任意一列進行排序，降序
   */
   function sortBy(index)
   {
       for(var i=0;i<arrstudent.length-1;i++)
	   {
		   for(var j=i+1;j<arrstudent.length;j++)
		   {
		          if(arrstudent[i][index].localeCompare(arrstudent[j][index])==-1)
				  {
				     var temp=new Array(4);
					//交換兩行
					 temp=arrstudent[i];
					 arrstudent[i]=arrstudent[j];
					 arrstudent[j]=temp;
				  }      
		   }
	   }
   }
</script>
<form>
   <table cellpadding="0" cellspacing="0">
     <tr bgcolor="#CCCCCC" bordercolor="#333333">
	    <th>學號</th><th>姓名</th><th>課程</th><th>成績</th>
	</tr>
	<tr>
	    <td><input type="text" name="stunum" size="10" /></td>
		<td><input type="text" name="stuname" size="10" /></td>
		<td> <select name="stuclass">
		     <option value="數值分析">數值分析</option>
		     <option value="人工舉升">人工舉升</option>
		     <option value="數值傳熱學">數值傳熱學</option>
		     <option value="高等流體力學">高等流體力學</option>
			 </select>
	    </td>
		<td><input type="text" name="stumark" size="4"  onKeyDown="toarr()"/></td>
	 </tr>
	 <tr>
	   <td align="center" colspan="4">
	      <div id="list" onClick="listAll()" style="background:#CCCCCC">列出所有成績</div>
	   </td>
	 </tr>
  </table>
</form>