13.4.1 二维数组的实现.html

javascript即用即差核心对象手册

<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>