1

jQueryでテーブルを作成するのに少し問題があります。これが私がこれまでに成し遂げたことです。

jQuery：

function createPuzzleTable () {
  // Create table with id
  $pt = $('<table>').attr('id','puzzleTable');

  // For-loop to create rows
  for (var y=0; y<4; y++) {
    var $row = $pt.append($('<tr>'));
    // For-loop to create cells, text-method is only for test numbering cells
    for (var x=0; x<4; x++) {
      $row.children().append($('<td>').text(y*4+x+1));
    }
  }
  // Alert to show structure of table
  alert ($pt.prop('outerHTML'));

  // Fetch gameArea by id and add table.
  $('#gameArea').append($pt);
}

アラート（クリア）：

<table id="puzzleTable">
  <tbody>
    <tr></tr><td>1</td><td>2</td><td>3</td><td>4</td>
    <tr></tr><td>5</td><td>6</td><td>7</td><td>8</td>
    <tr></tr><td>9</td><td>10</td><td>11</td><td>12</td>
    <tr></tr><td>13</td><td>14</td><td>15</td><td>16</td>
  </tbody>
</table>

<tr>要素内に<td>要素を設定する方法は？

解決策（Paolo Bergantinoに感謝）：

for (var y=0; y<4; y++) {
  var $row = $('<tr>');
  $pt.append($row);
  for (var x=0; x<4; x++) {
    $row.append($('<td>').text(y*4+x+1));
  }
}
4

2 に答える 2

3

あなたはこのようなことをしたいです：

var $row = $('<tr/>');
for(..) {
   $row.append($('<td/>')...);
}
$pt.append($row);
于 2013-03-27T13:14:05.160 に答える
1

私はこれがこれを行うためのより良い方法だと思います：

function createPuzzleTable () {
    // Create table with id
    var $pt = '<table id="puzzletable">';

    // For-loop to create rows
    for (var y=0; y<4; y++) {
         // For-loop to create cells, text-method is only for test numbering cells

        $pt += '<tr>';

        for (var x=0; x<4; x++) {
            $pt += '<td>';
            //add content to TD here
            $pt += '</td>';
        }

        $pt += '</tr>';
    }

    $pt += '</table>';
    $('#gameArea').append($pt);
}

このメソッドを使用するということは、テーブルのHTMLを文字列として設定した後、DOMを1回だけ操作することを意味します。

于 2013-03-27T13:15:06.487 に答える