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.