Link Entire Table Row

how to make a whole row in a table clickable as a link?

Author's note I:

Please look at other answers below, especially ones that do not use jquery.

Author's note II:

Preserved for posterity but surely the wrong approach in 2020. (Was non idiomatic even back in 2017)

Original Answer

You are using Bootstrap which means you are using jQuery :^), so one way to do it is:

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

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

Of course you don't have to use href or switch locations, you can do whatever you like in the click handler function. Read up on jQuery and how to write handlers;

Advantage of using a class over id is that you can apply the solution to multiple rows:

<tbody>
    <tr class='clickable-row' data-href='url://link-for-first-row/'>
        <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
    </tr>
    <tr class='clickable-row' data-href='url://some-other-link/'>
        <td>More money</td> <td>1234567</td> <td>£800,000</td>
    </tr>
</tbody>

and your code base doesn't change. The same handler would take care of all the rows.

Another option

You can use Bootstrap jQuery callbacks like this (in a document.ready callback):

$("#container").on('click-row.bs.table', function (e, row, $element) {
    window.location = $element.data('href');
});

This has the advantage of not being reset upon table sorting (which happens with the other option).

---

Note

Since this was posted window.document.location is obsolete (or deprecated at the very least) use window.location instead.

Link entire table row?

I agree with Matti. Would be easy to do with some simple javascript. A quick jquery example would be something like this:

<tr>
  <td><a href="http://www.example.com/">example</a></td>
  <td>another cell</td>
  <td>one more</td>
</tr>

and

$('tr').click( function() {
    window.location = $(this).find('a').attr('href');
}).hover( function() {
    $(this).toggleClass('hover');
});

then in your CSS

tr.hover {
   cursor: pointer;
   /* whatever other hover styles you want */
}

html - table row like a link

You have two ways to do this:

• Using javascript:

  <tr onclick="document.location = 'links.html';">

• Using anchors:

  <tr><td><a href="">text</a></td><td><a href="">text</a></td></tr>

I made the second work using:

table tr td a {
    display:block;
    height:100%;
    width:100%;
}

To get rid of the dead space between columns:

table tr td {
    padding-left: 0;
    padding-right: 0;
}

Here is a simple demo of the second example: DEMO

How to make tr clickable as a link instead of cell?

Try this (without JS):

        <tr>        <td style="text-decoration: underline; font-size: 15px;"></td>        <td>          <a href="http://google.com">            <div style="height:100%;width:100%">               1<?php echo $row['district']; ?>            </div>          </a>        </td>                <td>          <a href="http://google.com">            <div style="height:100%;width:100%">              2<?php echo $row['program']; ?></td>            </div>          </a>        <td>          <a href="http://google.com">            <div style="height:100%;width:100%">              3<?php echo $row['gender']; ?>            </div>          </a>        </td>        <td>          <a href="http://google.com">            <div style="height:100%;width:100%">              4<?php echo $row['yoa']; ?>            </div>          </a>        </td>        <td>          <a href="http://google.com">            <div style="height:100%;width:100%">              5<?php echo $row['email']; ?>            </div>          </a>        </td>

Clickable table row linked to url

I'm not too sure what you mean by entire row(not just the data cell). Are you wanting to actually display the html code on the screen? Is that what you mean by entire row?

If you are just wanting the Row 1 Cell 1 as a hyperlink then this code below might help.

yourjavascriptpage.js or use the upper section of code below in yourphpfile.php as echo

"<div class='link'><a href=\"../cell1.php\">Row 1 Cell 1</a></div>";
    "<div class='link2'><a href=\"../cell2.html\">Row 1 Cell 2</a></div>";
    "<div class='link3'><a href=\"../banners/cell3.php\">Row 1 Cell 3</a></div>";

document.getElementById("link").innerHTML = "Row 1 Cell 1";
document.getElementById("link2").innerHTML = "Row 1 Cell 2";
document.getElementById("link3").innerHTML = "Row 1 Cell 3";

yourhtmlpage.html

<td><div  id="link"></div></td>
<td><div  id="link2"></div></td>
<td><div  id="link3"></div></td>

or maybe you are looking for something like this ....

var link = "Row 1 Cell 1";
var link2 = "Row 1 Cell 2";
var link3 = "Row 1 Cell 3";
var result1 = link.link("https://www.gosomewhere.com");
var result2 = link2.link("https://www.gosomewhere.com");
var result3 = link3.link("https://www.gosomewhere.com");

Or here is a complete javascript solution I found online for you
https://www.robertcooper.me/table-row-links

How to make entire tr in a table clickable like a href=

Try putting display as block.

td a { 
   display: block; 
}

Fiddle

Also have a look at answer in this question too.

Make an entire row a table clickable

just use click o doubleClick event

1. on load event for verify document is ready to attach events click on elements
2. just get table and children (tr)
3. use forEach (iterate) to attach even click or dbclick tr.onclick = yourfunction

check this example taking a base table of you link and adding my custom js

// attach event onLoad (onready wih jQuery)
document.addEventListener("DOMContentLoaded", onLoad);
window.addEventListener("load", onLoad);

function onLoad() {
  const table = document.getElementById("example")
  clickableRows(table, onClickRow)
}

/*
Event onClick Row
*/
function onClickRow(mouseEvent) {

  const clickedRow = mouseEvent.target.tagName = "TD" ? mouseEvent.target.parentElement : mouseEvent.target;
  console.log(mouseEvent, clickedRow);
  alert("click on cell with text << " + mouseEvent.target.innerText + " >>");
}
/*
Add click event each row (TR tags)
*/
function clickableRows(tableElement, clickEvent) {
  if (!tableElement || (tableElement && tableElement.tagName !== 'TABLE')) return;
  const rows = tableElement.querySelectorAll("tr");
  rows.forEach(row => {
    // override onclick event, all TR will use same function on trigger event click
    // row.onclick = clickEvent;
    // maybe u want double click instead click    
    row.ondblclick = clickEvent;
  })
}

table#example {
  border-collapse: collapse;
  border: 3px solid #ccc;
}

#example tr {
  background-color: #eee;
  border-top: 2px solid #ccc;
}

#example tr:hover {
  background-color: #ccc;
}

#example th {
  background-color: #fff;
}

#example th,
#example td {
  padding: 3px 5px;
}

#example td:hover {
  cursor: pointer;
}

<table id="example">
  <tr>
    <th> </th>
    <th>Name</th>
    <th>Description</th>
    <th>Price</th>
  </tr>
  <tr>
    <td><a href="apples">Edit</a></td>
    <td>Apples</td>
    <td>Blah blah blah blah</td>
    <td>10.23</td>
  </tr>
  <tr>
    <td><a href="bananas">Edit</a></td>
    <td>Bananas</td>
    <td>Blah blah blah blah</td>
    <td>11.45</td>
  </tr>
  <tr>
    <td><a href="oranges">Edit</a></td>
    <td>Oranges</td>
    <td>Blah blah blah blah</td>
    <td>12.56</td>
  </tr>
</table>

---

Related Topics