无法追加动态表中的行，但可以追加整个表格

Question

我显然没有看到明显的东西，但是为什么我不能将动态生成的表的一部分（在本例中为前 2 行）附加到div，但我可以附加整个表。

<div id="divarea"></div>
    var table = '<table id="abc">';
    for (var i=0; i<15; i++) {
  table += '<tr>';
  table += '<td>one</td>';
  table += '<td>two</td>';
  table += '<td>three</td>';
  table += '<td>four</td>';
  table += '<td>five</td>';
  table += '<td>six</td>';
  table += '<td>seven</td>';
  table += '<td>eight</td>';
  table += '</tr>';
}
table += '</table>';
// var limitTable = $('#abc tr:lt(2)'); 
// $('#output').append(limitTable);          Doesn't work 
$('#output').append(table); // This works

编辑：表ID="abc"添加

吉斯菲德尔

Answer 1

您没有使用正确的选择器。您可以使用：

var limitTable = $("tr:lt('2')", table);

var table = '<table id = "abc">';
for (var i = 0; i < 15; i++) {
  table += '<tr>';
  table += '<td>one</td>';
  table += '<td>two</td>';
  table += '<td>three</td>';
  table += '<td>four</td>';
  table += '<td>five</td>';
  table += '<td>six</td>';
  table += '<td>seven</td>';
  table += '<td>eight</td>';
  table += '</tr>';
}
table += '</table>';
//the second parameter provides the context
//in which to search the element matched by the first selector
var limitTable = $("tr:lt('2')", table);
$('#output').append(limitTable);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>

此外，最好将表元素附加到表中而不是在div 中。

Answer 2

在 jquery 中使用 find（）

var limitTable =  $(table).find("tr:lt(2)");
 $('#output').append(limitTable);

演示