【JavaScript-二维数组】用JavaScript将表格里的元素添加到二维数组

最新推荐文章于 2024-04-25 00:00:00 发布

weixin_30407099

最新推荐文章于 2024-04-25 00:00:00 发布

阅读量768

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sugar1075/p/5417736.html

版权

首先，要知道如何创建二维数组。

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

weixin_30407099

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript-二维数组】用JavaScript将表格里的元素添加到二维数组

首先，要知道如何创建二维数组。http://blog.csdn.net/wangyuchun_799/article/details/38460515这里引入一种最简单的。<script type="text/javascript"> var arr = new Array(); //创建一个一维数组 for ...
复制链接

扫一扫