我想在每行和每列中生成随机数。我这样写下面。它只生成两行。我想创建4 * 4 suduku。所以我这样给了
<script type="text/javascript">
var random1, random2, random3, random4;
var randomArray = [0,0,0,0];
//sets array variables to random numbers
function CreateLottoValues() {
for (var i=0; i<randomArray.length; i++) {
randomArray[i] = Math.floor(Math.random()*4 + 1);
}
}
}
//create table
function UpdateTable() {
CreateLottoValues();
for (var i=0; i<randomArray.length; i++) {
tmp = 'cell'+(i+1);
document.getElementById(tmp).innerHTML = randomArray[i];
}
}
</script>
</head>
<body onload="UpdateTable();">
<center>
<div id="container">
<div id="header"> <h1>Welcome</h1> </div>
<div id="content">
<span id="tableSpan">
<table border="1" id="lotto">
<tr>
<td class="normal" id="cell1"> </td>
<td class="normal" ><input type="text" name=""></td>
<td class="normal" > </td>
<td class="red" id="cell4"> </td>
</tr>
<tr>
<td class="normal" id="cell1"> </td>
<td class="normal" id="cell2"> </td>
<td class="normal" id="cell3"> </td>
<td class="red" id="cell4"> </td>
</tr>
<tr>
<td class="normal" id="cell1"> </td>
<td class="normal" id="cell2"> </td>
<td class="normal" id="cell3"> </td>
<td class="red" id="cell4"> </td>
</tr>
<tr>
<td class="normal" id="cell1"> </td>
<td class="normal" id="cell2"> </td>
<td class="normal" id="cell3"> </td>
<td class="red" id="cell4"> </td>
</tr>
</table>
</span>
<input type="button" value="Re-generate Numbers" onclick="UpdateTable();" />
请帮我在所有行和列中生成随机数。谢谢。
答案 0 :(得分：1)
确保HTML中包含唯一的Id。
还要避免使用内联事件。使用更简洁的javascript绑定事件并分离您的疑虑。
<强> HTML
<center>
<div id="container">
<div id="header">
<h1>Welcome</h1>
</div>
<div id="content">
<table border="1" id="lotto">
<tbody>
<tr>
<td class="normal" id="cell00"> </td>
<td class="normal" id="cell01"> </td>
<td class="normal" id="cell02"> </td>
<td class="red" id="cell03"> </td>
</tr>
<tr>
<td class="normal" id="cell10"> </td>
<td class="normal" id="cell11"> </td>
<td class="normal" id="cell12"> </td>
<td class="red" id="cell13"> </td>
</tr>
<tr>
<td class="normal" id="cell20"> </td>
<td class="normal" id="cell21"> </td>
<td class="normal" id="cell22"> </td>
<td class="red" id="cell23"> </td>
</tr>
<tr>
<td class="normal" id="cell30"> </td>
<td class="normal" id="cell31"> </td>
<td class="normal" id="cell32"> </td>
<td class="red" id="cell33"> </td>
</tr>
</tbody>
</table>
</div>
</div>
<input id="btn" type="button" value="Re-generate Numbers" />
</center>
<强> JS
var btn = document.getElementById('btn');
btn.addEventListener('click', UpdateTable);
// Set the max length of random number
// and the max length
var maxLength = 4;
// You don't require an empty array here
// to populate the list of random numbers.
// Returns a random number
function CreateLottoValues() {
return Math.floor(Math.random() * 4 + 1);
}
//create table
function UpdateTable() {
// Iterate over each cell and set a random number
for (var i = 0; i < maxLength; i++) {
for (var j = 0; j < maxLength; j++) {
tmp = 'cell' + i + j;
document.getElementById(tmp).innerHTML = CreateLottoValues();
}
}
}
UpdateTable();
答案 1 :(得分：0)
很容易将单元格id重命名为cell1，cell2，cell3，cell4，cell5 ...... 在每次迭代中，您都必须编辑4列而不是一列
<强>脚本
<script>
var random1, random2, random3, random4;
var randomArray = [0, 0, 0, 0];
//sets array variables to random numbers
function CreateLottoValues() {
for (var i = 0; i < randomArray.length; i++) {
randomArray[i] = Math.floor(Math.random() * 4 + 1);
}
}
//create table
function UpdateTable() {
CreateLottoValues();
for (var i = 0; i < randomArray.length; i++) {
tmp1 = 'cell' + (i * 4 + 1);
tmp2 = 'cell' + (i * 4 + 2);
tmp3 = 'cell' + (i * 4 + 3);
tmp4 = 'cell' + (i * 4 + 4);
document.getElementById(tmp1).innerHTML = Math.floor(Math.random() * 4 + 1);;
document.getElementById(tmp2).innerHTML = Math.floor(Math.random() * 4 + 1);;
document.getElementById(tmp3).innerHTML = Math.floor(Math.random() * 4 + 1);;
document.getElementById(tmp4).innerHTML = Math.floor(Math.random() * 4 + 1);;
}
}
</script>
<强> HTML
<body onload="UpdateTable();">
<center>
<div id="container">
<div id="header">
<h1>Welcome</h1>
</div>
<div id="content">
<table border="1" id="lotto">
<tr class="tr1">
<td class="normal" id="cell1"> </td>
<td class="normal" id="cell2"> </td>
<td class="normal" id="cell3"> </td>
<td class="red" id="cell4"> </td>
</tr>
<tr class="tr2">
<td class="normal" id="cell5"> </td>
<td class="normal" id="cell6"> </td>
<td class="normal" id="cell7"> </td>
<td class="red" id="cell8"> </td>
</tr>
<tr class="tr3">
<td class="normal" id="cell9"> </td>
<td class="normal" id="cell10"> </td>
<td class="normal" id="cell11"> </td>
<td class="red" id="cell12"> </td>
</tr>
<tr class="tr4">
<td class="normal" id="cell13"> </td>
<td class="normal" id="cell14"> </td>
<td class="normal" id="cell15"> </td>
<td class="red" id="cell16"> </td>
</tr>
</table>
</div>
</div>
<input type="button" value="Re-generate Numbers" onclick="UpdateTable();" />
</center>
</body>
答案 2 :(得分：0)
我有一个可以让这更容易的库。
它被称为html5csv.js
这是JSFIDDLE of your 4x4 randomized table problem。
HTML
<div id='content'></div>
<div id='control'>
<button id='start'>click to randomize</button>
</div>
javascript / jQuery /加载了html5csv.js
$(function(){
$('#start').on('click',
CSV.begin('%F', {
header: ['a','b','c','d'],
dim:[4,4],
func: function(r,c){ return Math.floor(1+4*Math.random())}
}).
table('content', {
header:1,
table: {border:1, id: "lotto"},
td: function(i,j,v){
if (j===3){
return {class: 'red',
id: 'cell'+i+j};
} else {
return {class: 'normal',
id: 'cell'+i+j};
}
}
}).finalize()
);
$('#start').click();
});
设置了类，我在小提琴中为.red设置了一个CSS粉红色背景，它看起来像Sushanth的表一样，但动态生成的源不会显示为小提琴中的“视图帧源”。
为了进一步扩展这个例子，可以在sessionStorage中保存随机表，然后通过使用CSV.begin从sessionStorage中获取数据来执行操作（重新随机化，提交拼图等等）的各种按钮，然后在.call中用它做一些事情。然后再次保存并显示它。
答案 3 :(得分：0)
function checkForDraw() {
var count = 0;
for(var i = 1; i < 10; i++){
var currentCell = document.getElementById("cell" + [i]);
if (currentCell.innerHTML == "O" || currentCell.innerHTML == "X"){
count = count + 1;
}
}
if(count == 9){
return true;
} else {
return false;
}
}