0

jquery で 2D テーブルを作成するため、行と列の td を分離できません。

10行10列の2Dテーブルを作成するにはどうすればよいですか:

私がこれまでに行ったこと：

$(document).ready(function () {
    for (var i = 1; i <= 10; i++) {
        $('.box').append('<td/>' + '</p>');
        for (var j = 1; j <= 10; j++); {
            $('.box').append('<td/>');
        }
    }
});

http://jsfiddle.net/VS37n/

事前にt​​hnx！

4

3 に答える 3

3

10 列と 10 行のテーブルが必要です。

var rows = 10;
var cols = 10;

HTML のテーブル構造では、行が階層の最初に来るため、最初に行を作成します。

$(document).ready(function() {
    var rows = 10;
    var cols = 10;
    var box = $('.box');

    for (var r = 0; r < rows; r++) {
        var tr = $('<tr>');
        //Here we will append the columns to the row before appending it to the box.
        box.append(tr);
    }
});

上記のコードでは、10 行しか作成されません。ここで、各行に 10 列を追加する必要があります。

$(document).ready(function() {
    var rows = 10;
    var cols = 10;
    var box = $('.box');

    for (var r = 0; r < rows; r++) {
        var tr = $('<tr>');

        for (var c = 0; c < cols; c++) {
            tr.append($('<td><p></p></td>')); //Create the table cell, with a p element as in your example, and append it to the row.
        }

        box.append(tr);
    }
});

このフィドルを見る

アップデート

あなたの投稿の jQuery セレクターが<div>class の要素を選択していることに気付きました.box。<table>ただし、これらの行と列を、存在しない要素に追加したいとします。<table>HTML に要素を追加するか、行を追加する前に Javascript で要素を追加することをお勧めします。

<table>div内に要素を追加できる場合は.box、次の行を変更するだけです。

var box = $('.box');

に：

var box = $('.box table:first');

何らかの理由で HTML を変更できない場合は、行と列の前にテーブルを動的に作成できます。

var box = $('<table>').appendTo('.box');
于 2013-07-10T13:07:17.667 に答える