                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JavaScript進(jìn)階篇

自己寫的一個二維數(shù)組的案例

<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>二維數(shù)組</title>
<style?type="text/css">
*?{?margin:?0;?padding:?0;?font-family:?微軟雅黑;?color:?#333;?}
a,input,img,button?{?text-decoration:?none;?border:?none;?outline:?none;?}
ul,ol,li?{?list-style-type:?none;?}
#form?{?width:?300px;?height:?300px;?padding:?10px;?overflow:?hidden;?position:?fixed;?top:?0;?bottom:?0;?left:?0;?right:?0;?margin:?auto;?border:?1px?solid?#CCC;?}
#form?h2?{?display:?block;?width:?100%;?line-height:?50px;?text-align:?center;?background-color:?#EEE;?color:?#65c0ba;?margin-bottom:?25px;?}
#form?ul?{?display:?block;?width:?100%;?overflow:?hidden;?}
#form?ul?li?{?display:?block;?width:?100%;?height:?36px;?overflow:?hidden;?line-height:?36px;?margin-bottom:?10px;?}
#form?ul?li?b?{?display:?block;?width:?60px;?background-color:?#65c0ba;?color:?white;?text-align:?center;?float:?left;?}
#form?ul?li?input?{?display:?block;?width:?220px;?height:?100%;?padding:?0?10px;?background-color:?#EEE;?float:?left;?cursor:?pointer;?}
#form?ul?li?button?{?display:?block;?width:?100%;?height:?100%;?background-color:?#65c0ba;?color:?white;?cursor:?pointer;?}
#form?h3?{?display:?block;?line-height:?36px;?}
#content?{?display:?block;?width:?100%;?height:?50px;?line-height:?25px;?color:?#666;?}
</style>
</head>
<body>
????<div?id="form">
????????<h2>內(nèi)容查詢</h2>
????????<ul>
????????????<li><b>行：</b><input?type="text"?id="hang"?/></li>
????????????<li><b>列：</b><input?type="text"?id="lie"?/></li>
????????????<li><button?id="tj">提交</button></li>
????????</ul>
????????<h3>結(jié)果：</h3>
????????<div?id="content"></div>
????</div>
<script?language="javascript"?type="text/javascript">
????????var?infos?=?[
????????????['小A','女',21,'大一'],['小B','男',23,'大三'],
????????????['小C','男',24,'大四'],['小D','女',21,'大一'],
????????????['小E','女',22,'大四'],['小F','男',21,'大一'],
????????????['小G','女',22,'大二'],['小H','女',20,'大三'],
????????????['小I','女',20,'大一'],['小J','男',20,'大三']
????????];
????????var?content?=?document.getElementById("content");
????????var?tj?=?document.getElementById("tj");
????????var?add?=?new?Array();
????????????for(var?i?=?0;?i?<?infos.length;?i++){
????????????????add[i]?=?new?Array();
????????????????????for(var?j?=?0;?j?<?infos[i].length;?j++){
????????????????????????add[i][j]?=?infos[i][j];
????????????????????};
????????????????function?apmp(val){
????????????????????var?hang?=?parseInt(document.getElementById("hang").value);
????????????????????var?lie?=?parseInt(document.getElementById("lie").value);
????????????????????var?str?=?val.replace(/(^\s*)|(\s*$)/g,?'');
????????????????????hang--;
????????????????????lie--;
????????????????????if((hang?>=?0?&&?hang?<?add.length)?&&?(str?==?''?||?str?==?undefined?||?str?==?null)){
????????????????????????document.getElementById("content").style.color?=?"#666";
????????????????????????document.getElementById("content").innerHTML?=?"該行結(jié)果為："?+?add[hang];
????????????????????}else?if((hang?>=?0?&&?hang?<?add.length)?&&?(lie?>=?0?&&?lie?<?add[hang].length)){
????????????????????????document.getElementById("content").style.color?=?"#666";
????????????????????????document.getElementById("content").innerHTML?=?"該行該列結(jié)果為："?+?add[hang][lie];
????????????????????}else{
????????????????????????alert("輸入范圍值不合法！");
????????????????????????document.getElementById("content").style.color?=?"red";
????????????????????????document.getElementById("content").innerHTML?=?"請重新輸入";
????????????????????};
????????????????};
????????????};
????????????tj.onclick?=?function?()?{
????????????????apmp(?lie.value?);
????????????};
????????????document.write("該表最大行數(shù)為："?+?add.length?+?"<br?/>"?+?"該表最大列數(shù)為："?+?add[0].length);
????</script>
</body>
</html>