如何动态地使用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表格？

回答

相关问题