我如何动态地填充一个转置HTML表与JQuery

How can I dynamically fill a transposed HTML table with JQuery?

本文关键字：一个 转置 HTML JQuery 表与 何动态 动态 填充      更新时间：2023-09-26

我正在努力与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);
}

这里您需要将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>

您将如何获得您的结果:

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

也就是说，在标题下面有这样的行是没有意义的。恐怕你把head(表头)和th(表列或行的标头)搞混了。

相关文章：