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的图像添加到id =“cell-0”的数据单元格中，依此类推...（1.png to id =“cell-1”）

我怎么能这样做？

Answer 1

尝试设置window.myTable或类似于table()的输出，然后通过从window.myTable访问来编辑表格。

为了添加图像，我而不是推荐的只是插入：

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

在domRow.append(domCol);之前（我没有测试过这个）。

Answer 2

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 3

这是一个简单的代码，用于在每个单元格中添加与其ID对应的图像。

＆＃13;

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

＆＃13;

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

＆＃13;

jQuery动态地将图像添加到表中

3 个答案: