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

Question

I'm struggling with HTML table formatting. So I've got the following JQuery function that dynamically fills the HTML format where information is filled along the row.

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>

I'm having trouble wrapping my head around how to have the information filled in down the column instead down the row so that the HTML is in the following format.

      <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>

Any help would be much appreciated.

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);
}

Answer 1

Here you need to add an id to your 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>

Answer 2

This is how you would get your result:

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

That said, having rows like this under thead doesn't really make sense. I am afraid you're confusing thead (table head) with th (headers for table columns or rows).