如何在表格行上启用锚标记？

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>

I have got this html page and i need to make the entire row as an anchor tag so when i hover over the row and click it I can goto another page. But When i try to execute it, the DOM throws the anchor tag outside table tags and it does not work. How can i implement this ?

Answer 1

You can't add <a> tag in a <table> . You can only add content in <td> tag.

Try to add a onclick attribute with document.location.href+='#anchor'; return false; document.location.href+='#anchor'; return false;

Example

 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

For go to another page use

window.location.href="url";

instead of

document.location

Answer 2

You can't.

A link can exist inside a table cell or completely contain a table. There are no options in between.

You could put a link in the first cell and then apply some JavaScript:

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

Answer 3

It is not a valid standard. You can use JS for acnchor. For example:

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

TR defination can be:

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