[英]Javascript: Creating a Table from an Array
我有一個HTML表:
<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行未定義
在處理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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.