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

Question

我显然没有看到明显的东西,但为什么我不能将动态生成的表的一部分(在这种情况下,前两行)附加到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"添加

的jsfiddle

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