开始JavaScript - 创建表

时间:2014-03-10 00:29:19

标签: javascript

我必须使用for循环创建一个数组以产生数字0-24。然后使用for循环在5x5“表格”中按顺序打印这些数字。

输出应为:0 1 2 3 4 x 5 6 7 8 9 x 10 11 12 13 14 x... 20 21 22 23 24

我无法弄清楚如何创建表格。

这是我的代码:

// Calculate numbers 0-24
var numbers = [];
for (var 0; i < 25; i++) {
    numbers[i] = i;
}


// Create table
for (var row = 0; row < 4; row++) {
    document.write('<tr>');
    for (var col = 0; col < 4; col++) {
        document.write('<td>' + numbers + '</td>');
    }
    document.write('</tr>');
}

3 个答案:

答案 0 :(得分:3)

问题是您正在访问没有任何索引的数组。试试这个:

var numbers = [];
for ( var 0; i<25; i++)
{
   numbers[i]= i;
}


//Create table
var i = 0;
var table = "<table>";
for (var row=0; row<5; row++)    //Changed from 4 to 5
{
   table += "<tr>";
   for (var col=0; col<5; col++)    //Changed from 4 to 5
   {
      table += "<td>" + numbers[i] + "</td>";    //numbers to numbers[i]
      i++;
   }
   table += "</tr>";
}
table += "</table>";
document.write(table);

更新:从@Jon P回答的内容我更新了我的答案,只写了一次。

答案 1 :(得分:3)

这看起来像是一项家庭作业,所以我会提出一些建议,而不是正确的answer

不要使用document.write

使用HTML在页面上创建表存根并为其指定ID。了解如何通过id获取元素。了解如何更新该元素的内部html。仅更新文档一次。

使用Firebug for Firefox或Chrome开发人员工具等工具检查呈现给页面的内容,以便找出出错的地方(或权利)。

在此处开始搜索知识:https://developer.mozilla.org/en-US/docs/Web/JavaScript

要获得额外的奖励,您可以在% operator

的帮助下,在没有嵌套for循环的情况下执行此操作

答案 2 :(得分:0)

极度矫枉过正,但也许你会发现这些功能很有用!

// creates an array that contains a sequence of numbers from 0 to size-1
function range(size) {
    size = Math.max(0, size);
    var result = [];
    while (size--) { result.unshift(size); }
    return result;
}

// splits an array into chunks of a certain size.
function chunk(array, size) {
    if (!array || !array.length || size < 1) { return array };
    return [array.slice(0, size)].concat(chunk(array.slice(size), size));
}

// takes a 2D array and converts it to an HTML table.
function createHTMLTable(table) {
    var html = table.map(function(row) {
        row = row.map(function(cell) { return "<td>"+ cell +"</td>"; });
        row = row.join('');
        return "<tr>"+ row +"</tr>";
    });
    html = html.join('');
    return "<table>"+ html +"</table>";
}

function renderHTML(html) {
    document.write(html);
}

var numbers   = range(25);
var table     = chunk(numbers, 5);
var tableHTML = createHTMLTable(table);

renderHTML(tableHTML);