js多维数组

最新推荐文章于 2024-08-30 12:08:57 发布

你你你就你

最新推荐文章于 2024-08-30 12:08:57 发布

阅读量187

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Ga_b_c/article/details/107217759

版权

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #t{
            width: 80%;
            border:1px solid red;
        }
        th,td{border: 1px solid red;height: 30px;text-align: center;}

    </style>
</head>
<body>
    <table id="t" cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>爱好</th>
                <th>地址</th>
            </tr>
        </thead>
        <tbody id="tb">           
        </tbody>
    </table>
    <script>
        var arr = [1,2,'a',true,['a','b']];
        var userInfo = [
            ['李健',20,'男','女','武汉'],
            ['李月',18,'女','睡觉'],
            ['李健2',200,'男','打豆豆'],
            ['李月2',108,'女','游戏'],
            ['李健',20,'男','女'],
            ['李月',18,'女','睡觉'],
            ['李健2',200,'男','打豆豆'],
            ['李月2',108,'女','游戏'],
            ['李健',20,'男','女'],
            ['李月',18,'女','睡觉'],
            ['李健2',200,'男','打豆豆'],
            ['李月2',108,'女','游戏']
        ]
        console.log(userInfo[0][3]);
        for(var i in userInfo){
            for(var j in userInfo[i]){
                console.log(userInfo[i][j])
            }
        }
        tb.innerHTML = tab(userInfo);

        function tab(arr){
            var res = '';
            // 行数是由数组的长度决定的
            for(var i = 0 ; i < arr.length ; i++){
                res += '<tr>';
                // 序号不参与二维数组里面的循环
                res += '<td>' + (i + 1) + '</td>';
                // 列数是由里面的二维数组决定的，循环是为了得到里面的数据
                for(var j = 0 ; j < arr[0].length ; j++){
                    res += '<td>';
                    res += arr[i][j]   
                    res += '</td>'
                } 
                res += '</tr>'
            }
            return res;
        }
    </script>
</body>