Как включить тег привязки в строке таблицы?

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

Вы не можете добавлять <a> тег в <table>. Вы можете только добавить контент в тег <td>.

Попробуйте добавить атрибут onclick с document.location.href+='#anchor'; return false;

Пример

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>

Update

Для пойти в соседний г страница использование

window.location.href="url"; 

вместо

document.location 

Answer 2

Вы не можете.

Ссылка может существовать внутри ячейки таблицы или полностью содержать таблицу. Между ними нет никаких вариантов.

Вы можете поставить ссылку на первую ячейку, а затем применить некоторые JavaScript:

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

Answer 3

Это не является допустимым стандартом. Вы можете использовать JS для acnchor. Например:

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

TR Defination может быть:

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