tbody不能工作jquery

Question

为什么我的tbody没有做我想做的，任何人都可以帮助我？

这是我的问题，如果我想在一行中显示，但为什么该值仅仅停留在1.2色谱柱：

这是我的jQuery：

$(function(){ 
    $.ajax({ 
    type: 'GET', 
    url: 'https://swapi.co/api/people/', 
    success: function(response) { 
     console.log(response); 
     var counter = 0; 
     var obj = response.results; 
     var Content = ' '; 
     var x = 0; 

     Content += '<tbody>'; //opening tag tbody 
     for(var i=0;i<obj.length; i++) 
     { 
      Content += '<tr>'; 
      Content += '<td>'+obj[i].name+'</td>'; 
      Content += '<td>'+obj[i].height+'</td>'; 
      Content += '<td>'+obj[i].hair_color+'</td>'; 
      Content += '<td>'+obj[i].skin_color+'</td>'; 
      Content += '<td>'+obj[i].eye_color+'</td>'; 
      Content += '<td>'+obj[i].birth_year+'</td>'; 
      Content += '<td>'+obj[i].gender+'</td>' 
      Content += '</tr>'; 
     } 
     Content += '</tbody>'; 
     $('#results').empty(); 
     $('#results').append(Content); 
    } 
    }); 
}); 

var tbody=document.getElementById("results"); 
var table=document.getElementById("tableId"); 
var tbodyIndex= [].slice.call(table.tBodies).indexOf(tbody); 

这我的HTML

<table class="table table-stripted table-bordered table-hover" id="tableId"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Height</th> 
      <th>Hair Color</th> 
      <th>Skin Color</th> 
      <th>Eye Color</th> 
      <th>Birth Year</th> 
      <th>Gender</th> 
     </tr> 
    </thead> 
    <tbody id="results"> 

    </tbody> 
</table> 

请帮助我，即时通讯新手在javascript，噢对于坏语法对不起，希望你们帮助我，谢谢

Answer 1

你的代码生成的HTML如下。
请注意两个嵌套的<tbody>元素，这会破坏表格的布局。

生成的HTML

<table class="table table-stripted table-bordered table-hover " id="tableId"> 

    <thead> 
    <tr> 
     <th>Name</th> 
     <th>Height</th> 
     <th>Hair Color</th> 
     <th>Skin Color</th> 
     <th>Eye Color</th> 
     <th>Birth Year</th> 
     <th>Gender</th> 
    </tr> 
    </thead> 

    <tbody id="results"> 
    <tbody> 

     <tr> 
     <td>Luke Skywalker</td> 
     <td>172</td> 
     <td>blond</td> 
     <td>fair</td> 
     <td>blue</td> 
     <td>19BBY</td> 
     <td>male</td> 
     </tr> 

    </tbody> 
    </tbody> 

</table> 

至于马腾面包车Tjonger已经回答了，从你的Content字符串中删除<tbody>以避免其重复。我使用html()来替换<tbody>的内容与新的HTML。

此外，你会想要执行dataTable()<table>本身，而不是<tbody>。

工作例

$(function() { 
 
    $.ajax({ 
 
    type: 'GET', 
 
    url: 'https://swapi.co/api/people/', 
 
    success: function(response) { 
 

 
     var obj = response.results, 
 
     Content; 
 

 
     for (var i = 0; i < obj.length; i++) { 
 
     Content += '<tr>'; 
 
     Content += '<td>' + obj[i].name + '</td>'; 
 
     Content += '<td>' + obj[i].height + '</td>'; 
 
     Content += '<td>' + obj[i].hair_color + '</td>'; 
 
     Content += '<td>' + obj[i].skin_color + '</td>'; 
 
     Content += '<td>' + obj[i].eye_color + '</td>'; 
 
     Content += '<td>' + obj[i].birth_year + '</td>'; 
 
     Content += '<td>' + obj[i].gender + '</td>' 
 
     Content += '</tr>'; 
 
     } 
 

 
     $('#results').html(Content); 
 
     $('#tableId').dataTable(); 
 

 
    } 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> 
 
<link href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet" /> 
 

 
<table class="table table-stripted table-bordered table-hover " id="tableId"> 
 
    <thead> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>Height</th> 
 
     <th>Hair Color</th> 
 
     <th>Skin Color</th> 
 
     <th>Eye Color</th> 
 
     <th>Birth Year</th> 
 
     <th>Gender</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody id="results"> 
 
    </tbody> 
 
</table>

Answer 2

当您的ajax响应进来时，您不必添加tbody标记。 它已经在DOM中。 您可以删除：

Content += '<tbody>'; 
Content += '</tbody>'; 

Answer 3

你缺少你周围的id TBODY的<tbody id=results>报价应该是<tbody id="results">和你产生在你的JS是没有必要的第二<tbody>。否则你的代码运行良好，所以看到这个fiddle with the problems corrected.