如何使用 JQuery 动态填充转置的 HTML 表？答案

【问题标题】：How can I dynamically fill a transposed HTML table with JQuery?如何使用 JQuery 动态填充转置的 HTML 表？
【发布时间】：2013-05-07 12:46:38
【问题描述】：

我正在为 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);
}

【问题讨论】：

能否告诉我们您在data.matches 中得到了什么，以便我们轻松找到您的问题。
@RohanKumar 这是一个包含hashrefs的arrayref。编辑/包含代码。
@Steve 您希望数据显示在标题中，就像正确的键值对一样。你根本不想使用 tbody？
@PSL 我无法绕着函数转置它，所以我不确定哪个是更好的选择。

标签： javascript jquery html

【解决方案1】：

这里你需要添加一个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>

【讨论】：

该表是 id=matches 部分的一部分

【解决方案2】：

这就是你得到结果的方式：

$('#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} );

也就是说，在广告下方放置这样的行并没有什么意义。恐怕您将 thead（表头）与 th（表列或行的标题）混淆了。

【讨论】：