如何在按钮单击时将数组中的随机值分配给表格单元格

时间:2016-01-29 11:35:18

标签: javascript php jquery html

我想实现代码来创建一个宾果应用程序,它点击按钮点击数组中的字母。

如何在运行按钮单击时随机将数组元素(如数组(a,b,c))分配给这些3X3表格单元格。当我得到像abc一样的行或对角线时,我想增加计数值。

我开始但我无法实现代码。我能得到任何建议。

这是我的代码

<html>
    <head>
    <script>
    function run(){ 
    var grid = document.getElementById("grid");
     for (var i = 0, row; row = grid.rows[i]; i++){
        row.cells[0].textContent = rand();    
        row.cells[1].textContent = rand();
        row.cells[2].textContent = rand();
     }
score()
    }
    function rand(){
var text = new Array();
var possible = "MCS*";
    return possible.charAt(Math.floor(Math.random() * possible.length));
}
function score(){
var Row = document.getElementById("grid");
var Cells = Row.getElementsByTagName("td");
alert(Cells[0].innerText);
alert(Cells[1].innerText);
alert(Cells[2].innerText);
alert(Cells[3].innerText);
alert(Cells[5].innerText);
alert(Cells[6].innerText);
alert(Cells[7].innerText);
alert(Cells[8].innerText);
}
    </script>
    </head>
    <body>
    <form metdod="post">

    <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100"v id="grid">
    <tr>
      <td id="1-1" height="19" width="20%">&nbsp;</td>
      <td id="1-2" height="19" width="20%">&nbsp;</td>
      <td id="1-3" height="19" width="20%">&nbsp;</td>
    </tr>
    <tr>
      <td id="2-1" height="16" width="20%">&nbsp;</td>
      <td id="2-2" height="16" width="20%">&nbsp;</td>
      <td id="2-3" height="16" width="20%">&nbsp;</td>

      </tr>
      <tr>
      <td id="3-1" height="19" width="20%">&nbsp;</td>
      <td id="3-2" height="19" width="20%">&nbsp;</td>
      <td id="3-3" height="19" width="20%">&nbsp;</td>
      </tr>
      </table>

      <br><br>

      <input type="button" onClick="return run();" value="run">
      </form>
      </body>
      </html>

提前致谢..

3 个答案:

答案 0 :(得分:1)

这是为每个单元格分配值的方法:

for(var row = 1; row <= 3; row++) {
    for(var col = 1; col <= 3; col++ {

        var id = '#'+ row + "-" + col;
        $(id).html(/* put some content here */);
    }
}

要分配随机数,请参阅Math.random()。如果将该值乘以10并将其向下舍入,则将得到0到9之间的整数。使用该值从数组中选择一个元素。

修改

因此,如果您有一个类似letters = [ "A", "B", "CD", "asum", 12, "whatsoever" ]的数组和一个随机数n,那么letters[n]将为您提供索引为n的数组元素。对于n == 2letters[n] == "CD"

答案 1 :(得分:1)

<html>
<head>
<script>
var arr_num = ["1","2","3"];
var match =["123","234","345","567","678","111","222","333","444","555","666"];
function run(){ 
    var counter =0;
    var grid = document.getElementById("grid");
    for (var i = 0, row; row = grid.rows[i]; i++){
        row.cells[0].textContent = arr_num[getRandom()];    
        row.cells[1].textContent = arr_num[getRandom()];
        row.cells[2].textContent = arr_num[getRandom()];
    }
    var a = getMatch();
    for(var i=0;i<getMatch().length; i++){
        if(match.indexOf(a[i]) > -1)
            counter++;
    }
    document.getElementById("count").innerHTML = counter++;
}
function getMatch(){
    var grid = document.getElementById("grid");
    var match1 = [[]];
    var match_dia =[];
    var temp_dia1 = 0;
    var temp_dia2 = 2;
    var temp_dia3 = 0;
    var temp_dia4 = 2;
    var match_col = [];
    for (var i = 0, row; row = grid.rows[i]; i++){
        match1[match1.length++] = row.cells[0].textContent+row.cells[1].textContent+row.cells[2].textContent;
        match1[match1.length++] = row.cells[2].textContent+row.cells[1].textContent+row.cells[0].textContent;
        if(match_col.length != 0){
            match_col[0] = match_col[0]+row.cells[0].textContent;
            match_col[1] = match_col[1]+row.cells[1].textContent;
            match_col[2] = match_col[2]+row.cells[2].textContent;
            match_col[3] = row.cells[0].textContent+match_col[3];
            match_col[4] = row.cells[1].textContent+match_col[4];
            match_col[5] = row.cells[2].textContent+match_col[5];
        }else{
            match_col[0] = row.cells[0].textContent;
            match_col[1] = row.cells[1].textContent;
            match_col[2] = row.cells[2].textContent;
            match_col[3] = row.cells[0].textContent;
            match_col[4] = row.cells[1].textContent;
            match_col[5] = row.cells[2].textContent;
        }
        if(match_dia.length != 0){
            match_dia[0] = match_dia[0]+row.cells[temp_dia1++].textContent;
            match_dia[1] = match_dia[1]+row.cells[temp_dia2--].textContent;
            match_dia[2] = row.cells[temp_dia3++].textContent+match_dia[2];
            match_dia[3] = row.cells[temp_dia4--].textContent+match_dia[3];
        }else{
            match_dia[0] = row.cells[temp_dia1++].textContent;
            match_dia[1] = row.cells[temp_dia2--].textContent;
            match_dia[2] = row.cells[temp_dia3++].textContent;
            match_dia[3] = row.cells[temp_dia4--].textContent;
        }
    }
    for(var i=0;i<match_col.length;i++){
        match1[match1.length++] = match_col[i];
    }
    match1[match1.length++] = match_dia[0];
    match1[match1.length++] = match_dia[1];
    return match1;
}
function getRandom(){
    return Math.floor(Math.random() * arr_num.length) + 0 ;
}
</script>
</head>
<body>
<form metdod="post">

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100"v id="grid">
<tr>
    <td id="1-1" height="19" width="20%">&nbsp;</td>
    <td id="1-2" height="19" width="20%">&nbsp;</td>
    <td id="1-3" height="19" width="20%">&nbsp;</td>
</tr>
<tr>
    <td id="2-1" height="16" width="20%">&nbsp;</td>
    <td id="2-2" height="16" width="20%">&nbsp;</td>
    <td id="2-3" height="16" width="20%">&nbsp;</td>

</tr>
<tr>
    <td id="3-1" height="19" width="20%">&nbsp;</td>
    <td id="3-2" height="19" width="20%">&nbsp;</td>
    <td id="3-3" height="19" width="20%">&nbsp;</td>
</tr>
</table>

<br><br>
<div id="count" name="count"></div>
<br><br>
<input type="button" onClick="return run();" value="run">
</form>
</body>
</html>

答案 2 :(得分:0)

这不是宾果游戏,而是你的&#34;将随机字母a,b,c分配给网格中的空格&#34;可以满足:

<Connector>

现在,如果您真的想要模拟BINGO,其中列变化,列中的NUMBERS因给定序列而异,这是一个不同的问题;请注意,您需要有一个算法来分配玩家卡,而另一个算法则需要从列表中选择随机值来进行游戏&#34;卡两者都需要考虑范围和以前填充的值来排除重复 - 可行但是完全不同的问题。

以上是代码中的代码:https://jsfiddle.net/MarkSchultheiss/tjd7j3oh/