Question

我正在尝试将不同的<td> - 元素附加到相应的tr - 元素，但无论如何，我正在尝试：它不起作用： - /很遗憾我无法给你一个完整的jsfiddle，因为整个表格相当复杂，依赖于地图和类似的东西，但我希望一些代码片段也没关系。

表格结构（标题）

var table = createElement('table');
table.className = "table";
table.id = "table";
var header = table.createTHead();
var row = header.insertRow(0);
var cell0 = row.insertCell(0);
cell0.innerHTML = "Indicator"
var cell1 = row.insertCell(1);
cell1.innerHTML = "Current value"
var cell2 = row.insertCell(2);
cell2.innerHTML = "High value"
var cell3 = row.insertCell(3);
cell3.innerHTML = "Low value"
var cell4 = row.insertCell(4);
cell4.innerHTML = "Average";
var cell5 = row.insertCell(5);
cell5.innerHTML = "Pic";
tbody = table.appendChild(document.createElement('tbody'));

然后我使用了for循环，其中创建了表的其余部分：

//"key" is the description of the "value"
for (var key in values) {
    //...
    //method to calculate the values
    ...
    //append values to tbody
    $(table).find(tbody).append("<tr>");
    $(table).find(tbody).append( "<td>"+(indicatorValue));
    $(table).find(tbody).append( "<td>"+(regionValue));
    $(table).find(tbody).append( "<td>"+(bestValues));
    $(table).find(tbody).append( "<td>"+(worstValues));
    $(table).find(tbody).append( "<td>"+(average));
    //append image to a td-element
    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>");
}

使用上面的代码，该表看起来像以下jsfiddle：http://jsfiddle.net/nwd6na53/2/
如您所见，tbody中的td - 元素未包含在tr - 元素中，但表行为空。您是否有任何提示如何将tds放入tr - 元素？非常感谢任何帮助！

Answer 1

在for循环中，您需要更多类似的内容：

for (var i = 0; i <= 10; i++) {
    var row = $('<tr></tr>');
    $(row).append('<td>row ' + i + ', column1</td>');
    $(row).append('<td>row ' + i + ', column2</td>');
    $(row).append('<td>row ' + i + ', column3</td>');
    $('#mytable').find('tbody').append(row);
}

以下是代码示例的小提琴： https://jsfiddle.net/u2enny6o/3/

请注意，我在append()中包含完整标记。

最好还是使用您用于标题部分的insertRow()和insertCell()方法。

Answer 2

@Marc的答案并不顺利。看到这个 jsfiddle fail

我认为你应该为元素tr创建一个变量。并将此tr附加到tbody。例如，请参阅此jsfiddle success：

var row = '<tr>' + '<td>' + indicatorValue + '</td><td>' + regionValue + '</td>' + '<td>' + bestValues + '</td></tr>';
$('table').find('tbody').append(row);

如何将tds附加到表行？

2 个答案: