0

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

2 回答 2

0

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-07T04:36:37.623 回答
0

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

$('#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 （表列或行的标题）混淆了。

于 2013-05-07T04:46:38.217 回答