自己写的一个二维数组的案例-慕课网

自己写的一个二维数组的案例

来源：3-7 二维数组

一像素成就大气之美

2018-06-20 09:12

<!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>二维数组</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>内容查询</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>结果：</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 = "该行结果为：" + 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 = "该行该列结果为：" + add[hang][lie];
                    }else{
                        alert("输入范围值不合法！");
                        document.getElementById("content").style.color = "red";
                        document.getElementById("content").innerHTML = "请重新输入";
                    };
                };
            };
            tj.onclick = function () {
                apmp( lie.value );
            };
            document.write("该表最大行数为：" + add.length + "<br />" + "该表最大列数为：" + add[0].length);
    </script>
</body>
</html>

写回答关注