javascript - 通过 jquery 将图像附加到

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

从你那里得到一些提示会很棒 :)

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>");

你不能返回元素，它总是返回对象，所以你要么在函数中附加它，要么使用我的代码。