CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
yehonatan
yehonatan

Reputation: 223

How to create clickable row in table using 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.

Upvotes: 0

Views: 26266

Answers (6)

victommasi
victommasi

Reputation: 359

The cleanest way I see is to use jasny bootstrap component

  1. Import the .js file into your project

  2. Put on tbody: 

     <tbody data-link="row" class="rowlink hand-cursor">

  3. Put an a element on first td element 

     <a href="#path"> path </a>
  4. Now the link is already working. To make it rich use this css file and its classes:

CSS

.hand-cursor { 
cursor: pointer; 
cursor: hand; 
}

.table-hoverplus>tbody>tr:hover>td {
 background-color: #eeeeee;
}

Upvotes: 0

Marcos Felipe
Marcos Felipe

Reputation: 11

I had the same problem.
I solved so:

1 - put ID in your table:

"tbListaFiadores"

2 - configure your table with :

clickToSelect: true,

3 - get click event :

$('#tbListaFiadores').on('click-row.bs.table', function (e, row, $element) {
console.log("onClickRow normal");
});

Upvotes: 0

Coding Enthusiast
Coding Enthusiast

Reputation: 3933

So you want to be able to navigate to another page. If you are planning to go to another page as you said in the comments, you might want to use location.href = url. the first solution will work if you click on any row.

 <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>
        <td>aaa</td>
        <td>bbb</td>
        <td>ccc</td>
        <td>ddd</td>                            
      </a></tr>
</table>

$("row").click(function(){
    //to navigate to another page
    location.href = 'user/student';//the other page's url
 });

Another way to implement this is by using the onclick in the specific row. This solution will work if you click on the specific row that has the onclick.

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

Another way is to give an id to the row and use js or jquery to select that id and navigate to the page you want like below:

 <table class="table table-hover">
          <tr id="row1">
            <td><strong>FirstName</strong></td>
            <td><strong>LastName</strong></td>
            <td><strong>Start</strong></td>
            <td><strong>End</strong></td>
          </tr>
          <tr><a>
            <td>aaa</td>
            <td>bbb</td>
            <td>ccc</td>
            <td>ddd</td>                            
          </a></tr>
    </table>
    //now you can use this to navigate

$('#row1').on('click', function(){
     window.location = "user/student";    
});

Upvotes: 0

Rusdi Karsandi
Rusdi Karsandi

Reputation: 21

Don't put anchor in nested tr. It's not a proper use. Instead, use the 

onclick="getElementById('edit-1').click()"

and add

style="cursor: pointer"

<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 onclick="getElementById('edit-1').click()" style="cursor: pointer">
    <td>aaa</td>
    <td>bbb</td>
    <td>ccc</td>
    <td><a href="url-here" id="edit-1">dddd</a></td>                            
  </tr>

Upvotes: 2

Zee
Zee

Reputation: 8488

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.

Upvotes: 3

Serhat MERCAN
Serhat MERCAN

Reputation: 1098

Also you can add a function all tr same time;

 $("tr").click(function(){
     // your click time codes...
 });

table-hover class only add to rows color change property. not click function definition!

Upvotes: 1

Related Questions