2

我正在尝试创建一个包含 100 个随机数的表，随机数从 0 到 100。我需要使用 JS 和 jQuery 在 HTML 中将 100 个随机数显示为 10 x 10 矩阵。我一直在处理的代码显示最后一个数组 10 次。这是代码：

<html>
    <head>
        <title>My Web Page</title>
        <script type = "text/javascript" src = "http://code.jquery.com/jquery-1.8.2.min.js" />
        </script>
    </head>
    <body>
        <h1 id = "randData">Randomize Data</h1>
        <button id = "myRandomizeBtn">Randomize</button>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </body>
    <script type="text/javascript">
    $("#myRandomizeBtn").bind("click",randomizeHandler);
    function randomizeHandler(evt)
    {
        var n = 10;
        var data = new Array();
        for (var i = 0; i < n; i++)
        {
            for (var j = 0; j < n; j++)
            {
                data[i,j] = Math.floor(100*Math.random());
                $("p").text(data);
            }
            $("br").text(data);
        }
    }
    </script>
</html>
4

4 回答 4

2

我真的不明白你现在是如何打印出数据的。你不能设置 a 的 text 属性br。

您现在拥有的方式$('p')将选择p页面上的所有元素。您可以使用该.eq()函数选择第 i 个p元素（每行一个）并设置其文本内容。

演示

$("#myRandomizeBtn").bind("click",randomizeHandler);

function randomizeHandler(evt)
{
  var n = 10;
  var data = [];
  for (i=0; i<n; i++)
  {
    data[i] = [];
    for (j=0; j<n; j++)
    {
      data[i][j] = Math.floor(100*Math.random());
    }
    $("p").eq(i).text(data[i]);
  }
}
于 2012-10-09T03:09:56.717 回答
1

添加：

数据[i] = 新数组（）；

修改的：

数据[i][j] = Math.floor(100*Math.random());

   function randomizeHandler(evt)
    {
            var n = 10;
            var data = new Array();
            for (i=0; i<n; i++)
            {
                    data[i] = new Array();
                    for (j=0; j<n; j++)
                    {
                            data[i][j] = Math.floor(100*Math.random());
                            $("p").text(data);
                    }
                    $("br").text(data);
            }
    }

我不明白这一行：

$("p").text(data);

$("br").text(data);

如果要访问表格中的单元格，请使用data[i][j]。

于 2012-10-09T03:09:01.490 回答
0

也许这就是你要找的，

css...

    table {
        font: 11px/24px Verdana, Arial, Helvetica, sans-serif;
        border-collapse: collapse;
        width: 320px;
        }

    td {
        border: 1px solid #CCC;
        padding: 0 0.5em;
        }

html...

    <head>        
    </head>
    <body>
        <div id='mydiv'></div>
        <button id = "myRandomizeBtn">Randomize</button> 
    </body>

javascript....

$("#myRandomizeBtn").bind("click",randomizeHandler); 

function randomizeHandler(evt){     
var root=document.getElementById('mydiv');
var tab=document.createElement('table');
tab.className="mytable";
var tbo=document.createElement('tbody');
var row, cell;
var n = 2;  
var data;    

for (i=0; i<n; i++)
{
    row=document.createElement('tr');
    for(var j=0;j<n;j++){
        cell=document.createElement('td');
        data = Math.floor(100*Math.random()); 
        cell.appendChild(document.createTextNode(data));
        row.appendChild(cell);
    }
    tbo.appendChild(row);
}
tab.appendChild(tbo);
root.appendChild(tab);
}

这是一个链接...
http://jsfiddle.net/ZzuHt/

希望能帮助到你...

于 2012-10-09T04:03:05.740 回答
0

这是一个工作示例：http: //jsfiddle.net/VGdpJ/

我认为你的问题在这里：

data[i,j] which should be ---> data[i][j]

您并没有真正制作这样的二维数组。

您还需要声明 data[i] 处的元素是一个数组（只是为了安全，并不是真正必要的）。IE

data[i] = [];

你也在做这个：

$("p") which is equal to document.getElementsByTagName("p");

哪个结果是所有p标签的数组！！！这就是为什么所有 p标签都有相同的文本。

玩弄风格：P http://jsfiddle.net/VGdpJ/1/

于 2012-10-09T03:35:07.213 回答