HTML表中未示出的表頭

Question

我有3列的HTML表和任意數量的行的（基於數據庫輸出。）

var fields = ['a','b','c']; //variable from database 
 
    var data = ['p', 'q', 'r']; //variable from database 
 
    var who = ['x', 'y', 'z']; //variable from database 
 
    
 
    $(function() { 
 
     var table = $("#resultTable"); 
 
     var rowNum = 3; 
 
     var resultHtml = ''; 
 
    
 
    \t for(var i = 0 ; i < rowNum ; i++) { 
 
    \t \t resultHtml += ["<tr>", 
 
    \t "<td>", 
 
    \t fields[i], 
 
    \t "</td>", 
 
    \t "<td>", 
 
    \t data[i], 
 
    \t "</td>", 
 
    \t "<td>", 
 
    \t who[i], 
 
    \t "</td>", 
 
    \t '</tr>'].join("\n"); 
 
    \t } 
 
    
 
    \t table.html(resultHtml); 
 
     return false; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="resultTable"> 
 
      <tr> 
 
       <th>Question</th> 
 
       <th>Decision</th> 
 
       <th>Whose Decision</th> 
 
      </tr> 
 
      <tr> 
 
       <td></td> 
 
       <td></td> 
 
       <td></td> 
 
      </tr> 
 
      </table>

表顯示內容正確，但不顯示每列的標題，如Question,Decision,Whose Decision

我在想什麼？

Answer 1

您更換整個HTML。 你需要apped html像

table.append(resultHtml); 

Answer 2

因爲您使用resultHtml替換表格HTML代碼。

Answer 3

您正在覆蓋javascript中的表格，我可以看到。 table.html（resultHtml）正在取代你在HTML代碼中的內容。

Answer 4

通過使用table.html(...)，您可以覆蓋表格的全部內容（包括標題）。

您可以使用類似的東西：

var fields = ['a','b','c']; //variable from database 
 
var data = ['p', 'q', 'r']; //variable from database 
 
var who = ['x', 'y', 'z']; //variable from database 
 

 
$(function() { 
 
    var table = $("#resultTable"); 
 
    var rowNum = 3; 
 
    var resultHtml = $('<table>').append(table.find('tr').first()).html(); 
 

 
    for(var i = 0 ; i < rowNum ; i++) { 
 
     resultHtml += ["<tr>", 
 
    "<td>", 
 
     fields[i], 
 
    "</td>", 
 
    "<td>", 
 
     data[i], 
 
    "</td>", 
 
    "<td>", 
 
     who[i], 
 
    "</td>", 
 
    '</tr>'].join("\n"); 
 
    } 
 

 
    table.html(resultHtml); 
 
    return false; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="resultTable"> 
 
    <tr> 
 
    <th>Question</th> 
 
    <th>Decision</th> 
 
    <th>Whose Decision</th> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
</table>