テーブル行にアンカータグを設定するにはどうすればよいですか？

Question

<div class="table-responsive"> 
    <table class="table table-bordered"> 
     <tbody> 
      <tr> 
       <th>head1</th> 
       <th>head2</th> 
       <th>head3</th> 
       <th>head4</th> 
       <th>head5</th> 
       <th>head6</th> 
       <th>head7</th> 
      </tr> 

      <a href="#"> 
       <tr> 
        <td>col1</td> 
        <td>col2</td> 
        <td>col3</td> 
        <td>col4</td> 
        <td>col5</td> 
        <td>col6</td> 
        <td>col7</td> 
       </tr> 
      </a> 

     </tbody> 

    </table> 
</div> 

私はこのhtmlページを持っています。アンカータグとして行全体を作成する必要があります。その行にマウスを置いてクリックすると別のページに移動できます。しかし、私はそれを実行しようとすると、DOMはアンカータグをテーブルタグの外に投げ、それは動作しません。これをどのように実装できますか？

Answer 1

あなたは<table>で<a>タグを追加することはできません。 <td>タグにのみコンテンツを追加できます。

は例

table { 
 
    height:200px; 
 
} 
 

 
#test{ 
 
    height:400px; 
 
    background-color:grey; 
 
}

<table> 
 
    <tr onclick="document.location+='#test';return false;"> 
 
    <td> 
 
     click 
 
    </td> 
 
    <td> 
 
     click 
 
    </td> 
 
    </tr> 
 
</table> 
 
<div class="test" id="test"></div>

document.location.href+='#anchor'; return false;

でonclick属性を追加してみアップデート

anotheに行くためにRページの使用

window.location.href="url"; 

の代わりに、 ``それ `Invalid`マークアップになり周り` `タグを持つ

document.location 

Answer 2

できません。

リンクは、テーブルセル内に存在することも、テーブルを完全に含むこともできます。その間にはオプションはありません。

あなたは、いくつかのJavaScriptを最初のセルにリンクを配置し、適用することができます：それは有効な標準

jQuery("tr").on("click", function (e) { 
    location = jQuery(this).find("a").attr("href"); 
}); 

Answer 3

ではありません。あなたはacchchorのJSを使用することができます。たとえば：

$('.table-bordered tr td').on("click", function(){ 
    window.location.href= $(this).parent().attr('href'); 
}); 

TRのdefinationを指定できます

<tr href="http:/www.yahoo.com">.....</tr>