Javascript – How to create clickable row in table using Bootstrap

htmljavascriptjquerytwitter-bootstrap

I'm trying to use Bootstrap to make the rows clickable but all I found is about lists. Is any way to do this?

I wrote this:

    <table class="table table-hover">
      <tr>
        <td><strong>FirstName</strong></td>
        <td><strong>LastName</strong></td>
        <td><strong>Start</strong></td>
        <td><strong>End</strong></td>
      </tr>
      <tr><a href="user/student">
        <td>aaa</td>
        <td>bbb</td>
        <td>ccc</td>
        <td>ddd</td>                            
      </a></tr>
</table>

but it didn't work.

Best Solution

Why don't you simply attach an onclick event like this:

<table class="table table-striped">
      <tr onclick="window.location.href = 'url';">>
        <td><strong>FirstName</strong></td>
        <td><strong>LastName</strong></td>
        <td><strong>Start</strong></td>
        <td><strong>End</strong></td>
      </tr>
      <tr onclick="window.location.href = 'url';">
        <td>aaa</td>
        <td>bbb</td>
        <td>ccc</td>
        <td>ddd</td>                            
      </a></tr>
</table>

Note: I would recommend you to use jQuery as bootstrap also uses jQuery.