首先,要知道如何创建二维数组。
http://blog.csdn.net/wangyuchun_799/article/details/38460515
这里引入一种最简单的。
<script type="text/javascript"> var arr = new Array(); //创建一个一维数组 for (var i = 0; i < 2; i++) { arr[i] = new Array(); for (var j = 0; j < 3; j++) { //将每一个子元素有定义为数组 arr[i][j] = ""; //此时的array1[i][j]可以视为二维数组,并初始化二位数组为空字符串 } } arr[0][0]=1; //给arr赋值 arr[0][1]=2; arr[0][2]=3; arr[1][0]=11; arr[1][1]=22; arr[1][2]=33; document.write(arr); //1,2,3,11,22,33 </script>
二维数组主要用来干什么呢?博主现在要用到的是将HTML中表格的值添加到二维数组中,以便后续对表格进行单元格合并啊之类的操作(用二维数组进行此类操作更利于后续的代码维护)
好的,那么接下来让我们看看怎么用JavaScript实现将表格里的元素添加到二维数组中吧~
<script> var tr = document.getElementsByTagName('tr'); //获取HTML中表格的tr var td = document.getElementsByTagName('td'); //获取HTML中表格的td var arr2 = new Array() //定义二维数组arr2 for (var i = 0; i < tr.length-1; i++) { //因为忽略了表头th,所以少了一组tr,故i<tr.length-1 arr2[i] = new Array(); for (var j = 0; j < td.length/(tr.length-1); j++) { //每一组tr中有的td个数:td.length/(tr.length-1) arr2[i][j] = ""; //初始化二位数组为空字符串 } } for (var x = 0; x < tr.length-1; x++) { for (var y = 0; y < td.length/(tr.length-1); y++) { arr2[x][y] = td[x*(td.length/(tr.length-1))+y].innerText; //td[?].innerText获取第?个td中的值,?= x*(td.length/(tr.length-1))+y } } </script>
现附上HTML部分代码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>二维数组的建立</title> </head> <body> <h3>用JS将表格数据写入二维数组</h3> <div class="table"> <table id="tb" width="400px" border="1" cellspacing="3" cellpadding="3"> <caption style="margin-bottom: 15px">table</caption> <tr> <th>year</th> <th>city</th> <th>name</th> <th>age</th> <th>score</th> <th>expense</th> </tr> <tr> <td>2015</td> <td>北京</td> <td>花花</td> <td>18</td> <td>600</td> <td>12222</td> </tr> <tr> <td>2015</td> <td>北京</td> <td>明明</td> <td>19</td> <td>620</td> <td>15000</td> </tr> <tr> <td>2015</td> <td>上海</td> <td>丽丽</td> <td>16</td> <td>630</td> <td>11000</td> </tr> <tr> <td>2016</td> <td>北京</td> <td>凯凯</td> <td>20</td> <td>660</td> <td>13000</td> </tr> <tr> <td>2016</td> <td>重庆</td> <td>琪琪</td> <td>19</td> <td>655</td> <td>10000</td> </tr> <tr> <td>2016</td> <td>成都</td> <td>菲菲</td> <td>20</td> <td>570</td> <td>19000</td> </tr> <tr> <td>2016</td> <td>成都</td> <td>妮妮</td> <td>17</td> <td>609</td> <td>16000</td> </tr> <tr> <td>2016</td> <td>河南</td> <td>娃娃</td> <td>18</td> <td>580</td> <td>13000</td> </tr> <tr> <td>2016</td> <td>上海</td> <td>tiantian</td> <td>18</td> <td>590</td> <td>16000</td> </tr> </table> </div> </body> </html>
效果如图所示
比如我调用alert(arr[0][0])即可得到2015.
此时,表格已经传到二维数组中了。
来源:https://www.cnblogs.com/sugar1075/p/5417736.html