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

現在、データをどのように印刷しているのかよくわかりません。のテキスト属性を設定することはできませんbr。

あなたが今それを持っている方法は、ページ上の$('p')すべてpの要素を選択します。この.eq()関数を使用して、i番目のp要素（各行に1つ）を選択し、そのテキストコンテンツを設定できます。

デモ

$("#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

追加した：

data [i] = new Array（）;

変更：

data [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

ここで実際の例: http://jsfiddle.net/VGdpJ/

あなたの問題はここにあると思います：

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

そのような 2 次元配列を実際に作成しているわけではありません。

また、data[i] の要素が配列であることを宣言する必要があります (安全のために、実際には必要ありません)。すなわち

data[i] = [];

あなたもこれを作っています：

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

結果はすべてのpタグの配列です!!! そのため、すべての pタグに同じテキストが含まれています。

スタイルをいじる：P http://jsfiddle.net/VGdpJ/1/

于 2012-10-09T03:35:07.213 に答える
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>

ジャバスクリプト....

$("#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 に答える