四、Javascript中数组

此处讲解有关数组操作的一个例子，循环遍历二维数组得到一个列表，如图所示。

实现步骤如下：

步骤一  定义一个二维数组，数组的定义是使用的中括号，数组元素之间使用英文状态下的逗号来进行分割。

//帖子数组的定义
            var msgArr = [['第2条帖子', 'a', '第2条帖子这是我的第2条帖子', '2011-02-14'],
                                    ['第4条帖子', 'c', '第4条帖子这是我的第4条帖子', '2011-02-01'],
                                    ['第3条帖子', 'b', '第3条帖子这是我的第3条帖子', '2011-02-23'],
                                    ['第1条帖子', 'c', '第1条帖子这是我的第1条帖子', '2011-02-08'],
                                    ['第5条帖子', 'b', '第5条帖子这是我的第5条帖子', '2011-02-18']];

步骤二  首先这些数据信息是放在表格中的，那么在js中实现一个表格，只需要使用document.write();方法即可，该方法实现的功能是向网页文件的body标签内部写入内容。写入的顺序遵循浏览器解析网页文件的顺序，从上到下。首先向网页文件写入表格的头部。

//1. 生成表格表头的函数
            function createHeader() {
                document.write('<table align="center" cellpadding="20px" border="1px" cellspacing="0">');
                document.write('<tr>');
                document.write('<th>标题</th>');
                document.write('<th>发贴人</th>');
                document.write('<th>帖子概览</th>');
                document.write('<th>发贴时间</th>');
                document.write('</tr>');
            } //end of createHeader()

步骤三  写入头部后，即可写入表格的主体部分的标签和内容，因为表格由行和列之分，而我们这里的数据在二维数组中的存储也是这样的结构，所以考虑使用两层的循环来遍历二维数组获取数据以及写入相关标签和内容。

//2. 把一个数组中的元素，循环遍历到表格中
            function createContent(msgArr) {
                for (var i=0, len=msgArr.length; i<len; ++i)
                {
                    //插入“<tr>”标签
                    document.write('<tr>');

                    //循环遍历每一行中的每一个单元格
                    for (var j=0; j<4; ++j)
                    {
                        //插入“<td>"标签
                        document.write('<td>');
                        
                        //插入单元格内容
                        //若输出帖子内容，则只输出前5个字符
                        if (2 == j && msgArr[i][j].length > 5)
                        {
                            var content = msgArr[i][j].substr(0, 5);
                            document.write(content);
                            document.write('……');
                        } else {
                            document.write(msgArr[i][j]);
                        }
                        
                        //插入“</td>”标签
                        document.write('</td>');
                    }
                    
                    //插入“</tr>”标签
                    document.write('</tr>');
                }
            } //end of createContent()

步骤四  将表格闭合起来

    //3. 生成表格的结束标志符“</table>”
            function createFooter() {
                document.write('</table>');
            } //end of createFooter()
            

步骤五  调用上面定义的函数 完成表格的输出

            //4. 输出表格
            function printTable()
            {
                createHeader();
                createContent(msgArr);
                createFooter();
            }

        printTable();

 

有关数组的一些属性和方法，在此不再赘述，http://www.w3school.com.cn/js/js_obj_array.asp