jQuery динамически добавлять изображения в таблицу

Question

Мне нужно добавить изображения к данной таблице. У меня есть следующий код:

HTML:

<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; 
} 

Теперь я хочу сделать добавлять изображения в каждой ячейке данных из другой функции. Пример:

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

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

Изображение с именем 0.png должна быть добавлена ​​к ячейке данных с идентификатором = «клетка-0» и так далее ... (1.png с идентификатором = "ячейка -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^=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>