How to make clickable as a link instead of cell?

Question

This must be a very easy and simple but i"m finding it hard to get it done.

I have a list of rows with 6 Column which shows data from mysql. I would like to make each row clickable instead of cell which opens a new url in new tab.

Here is the structure.

<tr> <a target="_" href="https://www.google.com">



<td style="text-decoration: underline; font-size: 15px;">  </td>
<td><?php echo $row['district']; ?></td>
<td><?php echo $row['program']; ?></td>
<td><?php echo $row['gender']; ?></td>
<td><?php echo $row['yoa']; ?></td>
<td><?php echo $row['email']; ?></td>


</a></tr>

Above Method Don't work. Any Help is appreciated

Possible duplicate of [Make table row clickable](https://stackoverflow.com/questions/8981798/make-table-row-clickable) — MONSTEEEER, Jan 31 '19 at 01:35

score 2 · Accepted Answer · answered Jan 31 '19 at 01:42

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>

Don't do this unless you are not developing for the general population. Tabbing through will be a pain. — Simen L, Mar 28 '22 at 15:20

score 2 · Answer 2 · answered Jan 31 '19 at 01:46

2

Try this:

tr {
    position: relative;
}

tr a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

This will make anchor tag occupies the whole tr width and height, if needed, add z-index to <a>

answered Jan 31 '19 at 01:46

boosted_duck

478
3
15

score 1 · Answer 3 · answered Jan 31 '19 at 01:36

1

Remove tag "A"

and bind onClick event at "TR"

<tr onclick="_linkWhatYouWant" style="cursor: pointer;"> <td> ... blabla </td> </tr>

answered Jan 31 '19 at 01:36

minam.cho

122
1
12

3

At least explain how to use jQuery's click(), or `addEventListener`. The use of `onclick` is just bad advice in 2019. – Mike 'Pomax' Kamermans Jan 31 '19 at 01:48
@Mike'Pomax'Kamermans Thanks Mike. You're right. I just give to him Hint. :-) – minam.cho Jan 31 '19 at 05:10
1

that's not what SO is for though. Don't just give hints, give answers =) – Mike 'Pomax' Kamermans Jan 31 '19 at 15:42

score 0 · Answer 4 · answered Jan 31 '19 at 01:46

I would like to say that this is not correct by the semantic point of view; However, you can set the role=button rule in your html.

function navigateTo(url) {
  window.location.href(url);
}

document.querySelector('#row-1').addEventListener('click', function() { navigateTo('http://www.google.com/') });

table {
  border-collapse: collapse;
}

tr {
  border: 1px solid black;
  cursor: pointer;
}

tr:hover {
  background: rgba(255,0,0,0.3);
}

<table>
  <tr id='row-1' role='button'>
    <td>Item 1</td>
    <td>Item 2</td>
    <td>Item 3</td>
    <td>Item 4</td>
    <td>Item 5</td>
    <td>Item 6</td>
  </tr>
  <tr id='row-2' role='button'>
    <td>Item 7</td>
    <td>Item 8</td>
    <td>Item 9</td>
    <td>Item 10</td>
    <td>Item 11</td>
    <td>Item 12</td>
  </tr>
</table>

Jakub Muda · Answer 5 · 2019-01-31T02:35:27.733

You can use jQuery and click function. This approach is simple and it gives you freedom to decide which rows are used as links. All you need to do is add a class and data attribute. You can also add cursor:pointer property in CSS.

$('.click').click(function(){
     window.location = $(this).data('href');
     //use window.open if you want a link to open in a new window
});

.click{cursor:pointer}

<tbody>
   <tr class="click" data-href="some-url-here">
       <th>1</th>
       <td>John Smith</td>
       <td>1-234-567-8900</td>
   </tr>
</tbody>

score 0 · Answer 6 · answered Jan 31 '19 at 02:26

Consider the following example:

https://jsfiddle.net/Twisty/3hnt6mws/

HTML

<table>
  <tr data-link="https://www.google.com" data-target="_BLANK">
    <td>
      District
    </td>
    <td>
      Program
    </td>
    <td>
      Gender
    </td>
    <td>
      YOA
    </td>
    <td>
      Email
    </td>
  </tr>
</table>

JavaScript

$(function() {
  $("table tr").click(function(e) {
    var u = $(this).data("link");
    var t = $(this).data("target");
    console.log(u, t);
    if (t.length) {
      window.open(u, t);
    } else {
      window.location.href = u;
    }
  });
});

Using the data attribute, you can store more info with the row and use that in the click event. You can then programmatically direct the browser to open a new window or direct to a new location.

Hope that helps.

score -1 · Answer 7 · answered Jan 31 '19 at 04:23

The <tr> tag defines a row in an HTML table.

A <tr> element contains one or more <th> or <td> elements.

<table>
  <a href="www.google.com"><tr>
    <th>Month</th>
    <th>Savings</th>
  </tr></a>
  <tr>
</table>

try this will help you u can use <button> tag also to display like a button

How to make clickable as a link instead of cell?

7 Answers7