2015-07-22 50 views
0

創建表I有一個HTML表:使用Javascript:從數組

<table> <tr id="0"></tr> <tr id="1"></tr> <tr id="2"></tr> <tr id="3"></tr> </table>

我然後進行16個數字的陣列,洗牌陣列,然後添加每一個號碼細胞在Javascript。

var numbers = shuffle([1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8]); 
console.log(numbers) 

function shuffle(o) { 
      for (var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); 
      return o; 
} 
function addCell(row, number) { 
      var cell = document.getElementById(row).insertCell(0) 
      cell.innerHTML = number; 
} 
function setNumbers() { 
    var column = 0; 
    var row = 0; 
    for (i = 0; i <= numbers.length; i++) { 
     column = column + 1; 
     if (column > 4) { 
      column = 0; 
      row = row + 1; 
     } 
     console.log(row) 
     addCell(row, numbers[i]); 
    } 
} 
setNumbers() 

功能setNumbers()應創建一個4行4列的表。 它應該是這樣創造的東西:

5 7 6 2 
1 4 3 4 
8 3 2 1 
5 6 7 8 

然而,它創建了一個:

8 5 1 5 
6 2 4 6 4 
7 2 8 3 1 
undefined 3 7 

四個數字在第1行,

五號碼2和3行,

和2個數字,並在行4中未定義

回答

1

有一個小錯誤在column值的處理,因爲你是從第二循環起行檢查column > 4將有5個項目

var numbers = shuffle([1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8]); 
 
console.log(numbers.length, numbers) 
 

 
function shuffle(o) { 
 
    for (var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); 
 
    return o; 
 
} 
 

 
function addCell(row, number) { 
 
    var cell = document.getElementById(row).insertCell(0) 
 
    cell.innerHTML = number; 
 
} 
 

 
function setNumbers() { 
 
    var column = 0; 
 
    var row = 0; 
 
    for (i = 0; i < numbers.length; i++) { 
 
    addCell(row, numbers[i]); 
 
    if (column == 3) { 
 
     column = 0; 
 
     row = row + 1; 
 
    } else { 
 
     column++; 
 
    } 
 
    } 
 
} 
 
setNumbers()
<table> 
 
    <tr id="0"></tr> 
 
    <tr id="1"></tr> 
 
    <tr id="2"></tr> 
 
    <tr id="3"></tr> 
 
</table>