ejsテンプレートの順序が間違っている

Question

私はejsテンプレートを使って配列をループし、テーブルに行を追加しています。生成されたもので、ここで

<div class="col-md-8 col-md-offset-2"> 
    <table class="table table-hover"> 
    <thead> 
     <tr> 
     <th> 
      Title 
     </th> 
     <th> 
      Creator 
     </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="createNewBoard"> 
     <th scope="row"> 
      Add New 
     </th> 
     <td> 
      + 
     </td> 
     </tr> 
     <% boards.forEach(function(board) { %> 
     <a href="/<%= board._id %>"> 
      <tr> 
      <th scope="row"> 
       <%= board.title %> 
      </th> 
      <td> 
       <%= board.creator %> 
      </td> 
      </tr> 
     </a> 
     <% }) %> 
    </tbody> 
    </table> 
</div> 

そして：ここに私のテンプレートに次のコードがある

<div class="col-md-8 col-md-offset-2"> 
    <a href="/584654b4c834f13ea05cf831"></a> 
    <a href="/5846563e97b6133f6832568d"></a> 
    <table class="table table-hover"> 
    <thead> 
     <tr> 
     <th> 
      Title 
     </th> 
     <th> 
      Creator 
     </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="createNewBoard"> 
     <th scope="row"> 
      Add New 
     </th> 
     <td> 
      + 
     </td> 
     </tr> 
     <tr> 
      <th scope="row"> 
       Yooo 
      </th> 
      <td> 
       gus.henry@me.com 
      </td> 
      </tr> 
     <tr> 
      <th scope="row"> 
       Swag 
      </th> 
      <td> 
       gus.henry@me.com 
      </td> 
      </tr> 
    </tbody> 
    </table> 
</div> 

なぜそれがむしろテーブルの行に比べて、上部にアンカータグを配置していますか？ブートストラップを使用するejs以外。

ありがとうございました。

Answer 1

これは、対応ブラウザ（つまりクロム）でテーブルが解析される方法と関連しています。

<a>タグは有効なHTMLであるため<td></td>のタグに含める必要があります.1つのchromeはページをレンダリングするときに<tbody>からクロムを移動します。 ejsはサーバーによって解釈されるため、ブラウザはejs <% %>のいずれも見ることはありません。出力ページで 'view source'を実行すると、期待通りに<a>タグが表示されます。

テーブル行をクリックして/[board id]ページに移動しようとしているようです。

<% boards.forEach(function(board) { %> 
     <tr onclick="javascript:window.location='/<%= board._id %>';"> 
     <th scope="row"> 
      <%= board.title %> 
     </th> 
     <td> 
      <%= board.creator %> 
     </td> 
     </tr> 
<% }) %> 

それとも、あなたが本当に非javascriptのソリューションをしたい場合（これはセルをカバーして）次のように、あなたは各<td>と<th>に絶対に<a>タグを配置することができます：あなたは、代わりにこのような何かを行うことができます。添付CSSで

<% boards.forEach(function(board) { %> 
     <tr> 
     <th scope="row"> 
      <%= board.title %> 
      <a class="coveringA" href="/<%= board._id %>"></a> 
     </th> 
     <td> 
      <%= board.creator %> 
      <a class="coveringA" href="/<%= board._id %>"></a> 
     </td> 
     </tr> 
<% }) %> 

は次のように

table td { 
     overflow:hidden; 
} 

.coveringA { 
     position:absolute; 
     display:block; 
     top:0px; 
     left:0px; 
     right:0px; 
     bottom:0px; 
     background:rgba(0,0,0,0); /* sets an invisible background to ensure its clickable in IE9 */ 
}