通过jquery将图片添加到<td>中

Question

我遇到了一个问题，无法将图像附加到<td>元素上。不幸的是，我无法向您展示完整的jsfiddle（值计算非常复杂），但我希望一些代码片段足够了。

表结构：

var table = createElement('table');
var header = table.createTHead();
var row = header.insertRow(0);
var cell0 = row.insertCell(0);
cell0.innerHTML = "Indikator"
var cell1 = row.insertCell(1);
cell1.innerHTML = "In dieser Region"
var cell2 = row.insertCell(2);
cell2.innerHTML = "Alle Regionen: Höchster Werte"
var cell3 = row.insertCell(3);
cell3.innerHTML = "Alle Regionen: Niedrigster Werte"
var cell4 = row.insertCell(4);
cell4.innerHTML = "Alle Regionen: Durchschnitt"
var cell5 = row.insertCell(5);
cell5.innerHTML = "Bewertung";
tbody = table.appendChild(document.createElement('tbody'));

然后我使用一个for循环来创建表格的剩余部分：

for (var key in values) {
    //...
    //method to calculate some values
    ...
    //append values to tbody
    $(table).find(tbody).append("<tr>");
    $(table).find(tbody).append( "<td>"+(indicatorValue)+"</td>");
    $(table).find(tbody).append( "<td>"+(regionValue)+"</td>");
    $(table).find(tbody).append( "<td>"+(bestValues)+"</td>");
    $(table).find(tbody).append( "<td>"+(worstValues)+"</td>");
    $(table).find(tbody).append( "<td>"+(average)+"</td>");
    $(table).find(tbody).append( "<td>"+ createIndicator(picIdentifier));
}

所有方法都正常工作，但我在最后一部分遇到了一些问题，即createIndicator(picIdentifier)，它用于引用图像源。

function createIndicator(state) {
    var img = document.createElement('img');
    if (picIdentifier == 'green') {
        img.src = "img/green_circle.png";
    } else {
        img.src = 'img/red_circle.png';
    }
    return img;
}

我的问题是：图片没有被创建，但每个单元格应该放置图片的地方只显示了[object HTMLImageElement]。您可以在这里检查：http://imgur.com/WAtplY7

我尝试了一些解决方法，并得出了一个结果，使用$(table).find(tbody).append(createIndicator(picIdentifier));来创建图片，但我没有在表格单元格中创建图片。在这里检查它的外观：http://imgur.com/7POq3wn

希望能从您那里得到一些提示 :)

- schlomm

Answer 1

我希望这个能够奏效，不要考虑函数。

  var img = "<img src='img/green_circle.png' />";
  if(picIdentifier != 'green')
  {
    img = "<img src='img/red_circle.png' />";
  }
  $(table).find(tbody).append( "<td>"+ img +"</td>");

无法返回元素，它将始终返回对象，因此您可以在函数中附加它或使用我的代码。

- Mohammad Ismail Khan

---

它的大小能否进行排列？ - alper

Answer 2

如果您正在使用Firefox或Chrome，右键单击图像，然后选择检查元素，以检查任何潜在的DOM错误。请记住，它必须包装在<td></td>中。

- nolvorite

---

没有任何DOM错误。通过调用createIndicator方法，它也返回正确的值：http://imgur.com/YrgjrKe - schlomm

我的意思是，在 http://imgur.com/7POq3wn 中，图片不显示为表格单元格的部分。 - nolvorite

我搞定了。不管怎样：谢谢你的时间和努力 :) - schlomm