How to Make a Whole Row in a Table Clickable as a Link

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.

Make an entire row a table clickable

just use click o doubleClick event

on load event for verify document is ready to attach events click on elements
just get table and children (tr)
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>

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>

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 whole row clickable

Looks like you are using ant.d table. I've grabbed one of the examples and console logged the output. You can find it here: https://codesandbox.io/s/s1xds?file=/index.js to show you how the onclick in the entire row is being triggered.

For your specific thing, you need to change onRow prop. You can't add a Link directly to the row, but you can use history from react-router (if you are using it, docs here) or directly mutate the URL when onclick is called.

So in your case, you'll have to do this:

<Table
            
            dataSource={orders}
            columns={columns}
            pagination={false}
            scroll={{ x: true }}
            onRow={(record, rowIndex) => {
              return {
                onClick: (event) => {
                  history.push(`/details/${record.id}`);
                },
              };
            }}
          />

<Table
            
            dataSource={orders}
            columns={columns}
            pagination={false}
            scroll={{ x: true }}
            onRow={(record, rowIndex) => {
              return {
                onClick: (event) => {
                  window.location.href = `${window.location.href}/details/${record.id}`
                },
              };
            }}
          />

How can i make the entire row of a table clickable in react js using Link or any other way?

You can use .push() method to programatically navigate to that page.
If you are using the latest react-router-dom you can use the useHistory hook to be able to use the push method.
Another advantage from push() will not break your UI, since the <Link /> component could cause problems in your UI since it's another element nested.

import React from 'react';
import { useHistory } from 'react-router-dom';

export const ExampleComponent = ({ content }) => {
  const history = useHistory();

  function handleRowClick() {
    const { number, name, age } = content;
    history.push('/user', { number, name, age });
  }

  return (
    <tbody>
      <tr onClick={handleRowClick}>
        <td>
          {content.accountOwner}
        </td>
        <td>
          {content.address}
        </td>
        <td>{content.profession}</td>
      </tr>
    </tbody>
  )
};

How do I make an entire row of a table clickable in css?

HTML has two basic types of elements, inline elements and block elements.
If you want to know more about it, just read here.

Because them <a> tag belongs to the class of the inline elements, it won't fill the whole table cell. The trick is to convert the anker tag with the link to a block element:

a {
  display: block;
}

Now the anker will fill the complete cell.
Below you will find a code example on how this solution works.

I have two extra advices for you as beginner:

Use of Non-Standard Fonts

Please take care, if you are using unusual fonts like tradegothic, which are not installed an all computers. If a visitor of a website does not have this font installed on his machine, he will see your website in the default font of his web browser.

If you want to use a custom font, please read here.

Do not use tables if not necessary

Using a table to display a navigation or other non-table data is mostly considered as a bad style of code.

Below you will find the exakt same looking navigation box without using an html table. This code could be considered to be more clean.

.nav {  width: 700px; /* Define the width of the navigation box */  padding: 0;}
.nav li {  list-style-type: none;  margin: -1px 0 0 0;}
/* Define the style of the ankers */.nav a,.nav a:visited {  display: block;  border: #315795 1px solid;  padding: 7px;    font-family: "tradegothic";  font-size: 14px;  font-weight: bold;  text-decoration: none;  color: #315795;  background: #bec7d6;}
/* Define the hover style for the ankers */.nav a:hover {  background-color: #315795;  color: #ffffff;}
/* Define the Arrows */.nav a::after {  content: "►►";  float: right;}

<ul class="nav">  <li><a href="http://stackoverflow.com">CENTER FOR MATHEMATICAL & COMPUTATIONAL MODELING IN BIOLOGY & MEDICINE</a></li>  <li><a href="http://stackoverflow.com">OUR PEOPLE - COMMITTEES</a></li>  <li><a href="http://stackoverflow.com">SEMINARS, COLLOQUIUM, CONFERENCES & RESEARCH</a></li></ul>

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 a Whole Row in a Table Clickable as a Link