zoukankan      html  css  js  c++  java
  • javascript二维数组

    注:1、此实例是验证二维数组两种赋值方式:1)先声明后赋值。2)声明的同时赋值。

         2、将数组元素输出到表格中。(表格的一个关键属性:border-collapse:collapse;合并表格单元格边框。)

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <script type="text/javascript">
    function getValue(){
    /*二维数组的声明*/
    var myarray1 = new Array(2);//声明2行
    myarray1[0] = new Array(3);//第一行有3列;以下同理。
    myarray1[1] = new Array(3);

    /*该数组存储的是表格单元格的地址,用于显示输出的数组值*/
    var location = new Array(2)
    location[0] = [document.getElementById("table00"),document.getElementById( "table01"),document.getElementById("table02")];
    location[1] = [document.getElementById("table10"),document.getElementById("table11"),document.getElementById("table12")];

    /*二维数组第一种赋值方法*/
    myarray1 = [[1,2,3],[4,5,6]] //外面括号不要使用{}

    /*使数组myarrya1中的值输出到表格中*/
    for(var row=0;row < 2;row++){
               for(var col=0;col < 3;col++){
        var flag = location[row][col];
        flag.innerHTML= myarray1[row][col];
        }
    }


    /*二维数组第二种赋值方法*/
    var location2 = new Array([document.getElementById("cell00"),document.getElementById("cell01"),document.getElementById("cell02")],[document.getElementById("cell10"),document.getElementById("cell11"),document.getElementById("cell12")])

    /*直接调用内置函数prompt()输入数组各个元素值,并且将数组元素值输出到location2对应的表格地址中*/

    for(var row=0;row < location2.length;row++){

      for(var col=0;col < location2[row].length;col++){

      location2[row][col].innerHTML = prompt("Enter a value:","anynumble or string");
      }
    }

    }

    </script>

    <style type="text/css">
    #mytable{border:2px inset #999;border-collapse:collapse;200px;height:100px;text-align:center;}
    /*border-collapse:collapse表示合并表格单元格边框*/
    tr,td{border:1px solid #666;}
    #mytable2{border:2px inset #999;border-collapse:collapse;200px;height:100px;text-align:center;}

    /*
    groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
    ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
    inset 定义 3D inset 边框。其效果取决于 border-color 的值。
    outset 定义 3D outset 边框。其效果取决于 border-color 的值。
    */
    </style>
    </head>

    <body onLoad="getValue()">
    <table id="mytable">
    <caption>数组一元素表</caption>
    <tr>
    <td id="table00">00</td>
    <td id="table01">01</td>
    <td id="table02">02</td>
    </tr>
    <tr>
    <td id="table10">10</td>
    <td id="table11">11</td>
    <td id="table12">12</td>
    </tr>

    </table>
    <hr/>
    <table id="mytable2">
    <caption>数组二元素表</caption>
    <tr>
    <td id="cell00">00</td>
    <td id="cell01">01</td>
    <td id="cell02">02</td>
    </tr>
    <tr>
    <td id="cell10">10</td>
    <td id="cell11">11</td>
    <td id="cell12">12</td>
    </tr>

    </table>
    </body>
    </html>

    备注:由于是新人,若有不当之处,请谅解之处。谢谢!

  • 相关阅读:
    MySQL一键安装
    架构师学习之路
    (转)Shell常用的特殊位置参数变量说明
    (转)Http状态码301和302概念简单区别及企业应用案例
    (转)nginx location在配置中的优先级
    (转)最新版 nginx内置变量 大全
    (转)nginx 常用模块整理
    (转)haproxy启动故障:Starting proxy:cannot bind socke
    keepalived脑裂问题查找
    (转)Apache和Nginx运行原理解析
  • 原文地址:https://www.cnblogs.com/sunshine-boys/p/5924517.html
Copyright © 2011-2022 走看看