CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
Yogi
Yogi

Reputation: 1579

How to enable anchor tag on a table row?

<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 ?

Upvotes: 1

Views: 5603

Answers (3)

Alexis
Alexis

Reputation: 5831

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;

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

Upvotes: 5

Muhammed Imran Hussain
Muhammed Imran Hussain

Reputation: 2125

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>

Upvotes: 1

Quentin
Quentin

Reputation: 943547

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");
});

Upvotes: 1

Related Questions