CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
ale10ander
ale10ander

Reputation: 986

Make row item a clickable link in bootstrap

I'm trying to make a site using bootstrap where one row of a table will be clickable. ie, I want it to show me text (click here for Stackoverflow) such that when the user clicks in that table row, they are directed to http://stackoverflow.com.

Note that I do not want just the text to act as a hyperlink; that would be trivial. I am trying to make the entire .row element a hyperlink.

The code is just standard bootstrap tables.

<div class="col-md-3">
    <div class="row">
        <p>Text here</p>
    </div>
    <div class="row">
        <p>More text</p>
    </div>
</div>

Things I have tried: I have tried adding a transparent picture on top of the row, and after wrangling with the positioning, ended up setting it as the background image of the row. Now it doesn't show up, and even if it did, still wouldn't act as a link.

Novice to bootstrap, willing to try almost any approach.

Upvotes: 1

Views: 4794

Answers (3)

Sajan Sharma
Sajan Sharma

Reputation: 41

Try using a Jquery function as below on html page

<tbody>
    <tr class='clickable-row' data-href='url://'>
        <td>Blah Blah</td>
        <td>1234567</td>
        <td>£158,000</td>
    </tr>
</tbody>

JQuery Function

jQuery(document).ready(function($) {
    $(".clickable-row").click(function() {
        window.document.location = $(this).data("href");
    });
});

Upvotes: 0

dpctrey
dpctrey

Reputation: 34

You should make a div with an id that you can use in Javascript like this: 

<div id='clickme'></div>

Then you should import the Javascript you are about to make like this:

<script type='text/JavaScript' src='yourFile.js'></script>

Then you should make a method in your .js file that is in the same directory as you html page that looks like this:

var myMap = document.getElementById("clickme");
myMap.onclick = function() {
	var myVar = window.open("https://www.stackoverflow.com");
};

I am 100% this will work for you. This will let you cover whatever area you want with this div you made and if anything inside of it is clicked then it will open a new tab with stackoverflow.

Upvotes: 1

Miguel
Miguel

Reputation: 20633

var rows = document.querySelectorAll('.table .row');

[].slice.call(rows).forEach(function (el) {
    el.onclick = function (e) {
        window.open(el.dataset.href);
    };
});

https://jsfiddle.net/DTcHh/8298/

Upvotes: 0

Related Questions