Home > Developer > JavaScript
Note: 1, This example is to verify that the two-dimensional array of two methods of Assignment: 1) first declared after the Assignment. 2) the declaration is assigned at the same time.
2. Output the array elements to the Table. (a Key property of the Table: border-collapse:collapse; merge table cell Borders.) ）
<!doctype html>
<meta charset= "utf-8" >
<title> Untitled Document </title>
<script type= "text/javascript" >
function GetValue () {
/* declaration of two-dimensional arrays */
var myarray1 = new Array (2);//declaration 2 lines
myarray1[0] = new Array (3);//the first row has 3 columns;
myarray1[1] = new Array (3);
/* the array stores the address of the table cell, which is used to display the array value of the output */
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 ")];
/* the first method of assignment for two-dimensional arrays */
Myarray1 = [[1,2,3],[4,5,6]]//outer brackets do not use {}
/* make the values in the array myarrya1 output to the table */
For (var Row=0;row < 2;row++) {
For (var Col=0;col < 3;col++) {
var flag = location[row][col];
Flag.innerhtml= myarray1[row][col];
}
}
/* second assignment method of two-dimensional array */
var location2 = new Array ([document.getelementbyid ("cell00"), document.getElementById ("cell01"), document.getElementById ("cell02")],[document.getelementbyid ("cell10"), document.getElementById ("cell11"), document.getElementById ("cell12")])
/* directly call the built-in function prompt () input array element values and output the array element values to the location2 corresponding table address */
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;width:200px;height:100px;text-align:center;}
/*border-collapse:collapse to merge table cell borders */
TR,TD{BORDER:1PX Solid #666;}
#mytable2 {border:2px inset #999; border-collapse:collapse;width:200px;height:100px;text-align:center;}
/*
Groove defines a 3D groove border. The effect depends on the value of the Border-color.
Ridge defines a 3D ridge-shaped border. The effect depends on the value of the Border-color.
Inset defines a 3D inset border. The effect depends on the value of the Border-color.
Outset defines a 3D outset border. The effect depends on the value of the Border-color.
*/
</style>
<body onload= "getValue ()" >
<table id= "mytable" >
<caption> array one element table </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>
<table id= "mytable2" >
<caption> array two elements table </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>
Note: as a new person, if there are inappropriate, please understand the Place. Thank you!
JavaScript two-dimensional array
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
