jQuery動的にテーブルに画像を追加する

Question

特定のテーブルに画像を追加する必要があります。今、私は別の関数から各データセルに画像を追加する必要

<div class="container" id="game"></div> 

Javascriptを

function table() { 
    var i, 
     x, 
     domRow, 
     domCol, 
     rows = $("#rows").val(), 
     colums = $("#columns").val(), 
     table = $('<table>'), 
     cellId = 0; 

    table.empty(); 
    for(i = 0; i < rows; i++) { 
     domRow = $('<tr/>'); 
     for(x = 0; x < colums; x++) { 
      domCol = $('<td/>',{ 
       'id': "cell-" + cellId++, 
       'class': "cell", 
       'text': 'cell', 
       'data-row': i, 
       'data-col': x 
      }); 

     domRow.append(domCol); 
     } 

    table.append(domRow); 
    } 
    return table; 
} 

：

HTML：私は、次のコードを持っています。 例：

function images() { 
    var game = $("game"); 

    // TODO the images need to be added too 
    game.append(table()) 
} 

名0.pngた画像は、ID =「セル0」など...（1.png IDへ= "セルとデータセルに追加する必要が

-1」）

どうすればいいですか？

Answer 1

jQuery appendメソッドは、追加するHTML文字列を返す関数をとることができます。そしてその機能の中でthisは要素を指します。だから、あなたは自分のテーブルのすべてのtdの要素を検索し、それぞれに右の画像を追加することができます：ここで

function images() { 
    var game = $("game"); 
    var tableEl = table(); 

    tableEl.find('td').append(function() { 
     // `this` is the <td> element jQuery is currently appending to 
     var num = this.id.split('-')[1]; 
     return '<img src="' + num + '.png" />'; 
    }); 

    game.append(tableEl) 
} 

Answer 2

window.myTableなどの出力をtable()の出力に設定してから、window.myTableからテーブルを編集してください。

画像を追加するために、どのような私は代わりだけで挿入されて推薦する：

var img = $('<img>'); 
img.attr('src', parseInt(cellId) + ".png"); 
img.appendTo(domCol); 

を右domRow.append(domCol);前に（私はこれをテストしていません）。

Answer 3

は、そのIDが一致する各セルにあなたのイメージを追加するための簡単なコードです。

$('[id^=cell-]').each(function() { 
 
    var curCell = $(this); 
 
    curCell.html('<img src="' + curCell.attr('id').substring(5) + '.png">'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table> 
 
    <tr><td id="cell-0">1</td><td id="cell-1">2</td></tr> 
 
</table>