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="">



<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

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.">



<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

• javascript
• jquery
• html
• css
• bootstrap-4

• 1 Possible duplicate of Make table row clickable – MONSTEEEER Commented Jan 31, 2019 at 1:35

7 Answers 7

Try this (without JS):

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

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>

Remove tag "A"

and bind onClick event at "TR"

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

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>

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./') });

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>

Consider the following example:

https://jsfiddle/Twisty/3hnt6mws/

HTML

<table>
  <tr data-link="https://www.google." 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.

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."><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