如何動態地使用JQuery填充轉置的HTML表格？

我正在努力處理HTML表格格式。所以我得到了下面的JQuery函數，它動態地填充了沿着行填充信息的HTML格式。如何動態地使用JQuery填充轉置的HTML表格？

file.js

function createHTML(data) { 
    var next_row_num = 1; 
     $.each(data.matches, function(i, item) { 
      var this_row_id = 'result_row_' + next_row_num++; 
      $('<tr/>', { "id" : this_row_id }).appendTo('#matches tbody'); 
      $('<td/>', { "text" : item.accession }).appendTo('#' + this_row_id); 
      $('<td/>', { "text" : item.description }).appendTo('#' + this_row_id); 
      $('<td/>', { "text" : item.structural }).appendTo('#' + this_row_id); 
     } 
}

HTML

<table> 
    <thead> 
     <tr> 
     <td>Accession</td> 
     <td>Description</td> 
     <td>Structural</td> 
     </tr> 
    </thead> 
    <tbody> 
     <!-- this will be filled in by javascript when there are results --> 
    </tbody> 
    </table>

我有麻煩纏繞我的頭圍繞如何已經填充了下來列，而不是往下排的信息，以便HTML是在格式如下。

 <table> 
      <thead> 
      <tr> 
       <td>Accession</td> 
       <td></td> 
      </tr> 
      <tr> 
       <td>Description</td> 
       <td></td> 
      </tr> 
      <tr> 
       <td>Structural</td> 
       <td></td> 
      </tr> 
      </thead> 
      <tbody> 
      </tbody> 
     </table>

任何幫助將不勝感激。

data.matches

for(my $i=0; $i < scalar(@accession); $i++){ 
    #hash ref: $href->{ $key } = $value; 
    my $href = {}; 
    $href->{'accession'}=$accession[$i]; 
    $href->{'description'}=$description[$i]; 
    $href->{'structural'}=$structural[$i]; 
    $href->{'chemical'}=$chemical[$i] 
    $href->{'functional'}=$functional[$i]; 
    $href->{'charge'}=$charge[$i]; 
    $href->{'hydrophobic'}=$hydrophobic[$i]; 
    $href->{'dayhoff'}=$dayhoff[$i]; 
    $href->{'sneath'}=$sneath[$i]; 
    push(@$matches, $href); 
}

來源

2013-05-07 Steve

你能告訴我們你在'data.matches'中得到了什麼，所以我們可以很容易地找到你的問題。 – 2013-05-07 04:30:48

@RohanKumar它是一個包含hashrefs的arrayref。編輯/包含代碼。 – Steve 2013-05-07 04:33:18

@Steve您希望數據像鍵值對一樣正確顯示。你根本不想使用tbody？ – PSL 2013-05-07 04:34:47

在這裏你需要一個id添加到您的table

<table id="matches"> 
<!-- Add an id in this element so your jquery will add data to this --> 
    <thead> 
     <tr> 
     <td>Accession</td> 
     <td>Description</td> 
     <td>Structural</td> 
     </tr> 
    </thead> 
    <tbody> 
     <!-- this will be filled in by javascript when there are results --> 
    </tbody> 
</table>

來源

2013-05-07 04:36:37

該表是id =匹配部分的一部分 – Steve 2013-05-07 17:44:23

這是你將如何讓你的結果：

$('#matches thead').append('<tr/>').append('<td/>', { "text" : item.accession }); 
$('#matches thead').append('<tr/>').append('<td/>', { "text" : item.description}); 
$('#matches thead').append('<tr/>').append('<td/>', { "text" : item.structural});

也就是說，具有行像這樣下這真的沒有道理。恐怕你將表頭（表頭）與th（表格列或行的標題）混淆。

來源

2013-05-07 04:46:38 Christophe

如何動態地使用JQuery填充轉置的HTML表格？

回答

相關問題