Как сделать <tr>кликабельным в виде ссылки вместо ячейки?

Question

Это должно быть очень легко и просто, но мне трудно это сделать.

У меня есть список строк с 6 столбцами, который показывает данные из mysql. Я хотел бы сделать каждыйщелчок строки вместо ячейки, которая открывает новый URL в новой вкладке.

Вот структура.

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

Выше метод не работает. Любая помощь приветствуется

Answer 1

Рассмотрим следующий пример:

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;
    }
  });
});

Используя атрибут data, вы можете сохранить дополнительную информацию в строке и использовать ее в событии click.Затем вы можете программно направить браузер на открытие нового окна или на новое местоположение.

Надеюсь, это поможет.

Answer 2

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

Answer 3

Вы можете использовать jQuery и функцию щелчка.Этот подход прост и дает вам свободу решать, какие строки используются в качестве ссылок.Все, что вам нужно сделать, это добавить класс и атрибут данных.Вы также можете добавить cursor:pointer свойство в 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>

Answer 4

Я хотел бы сказать, что это не правильно с точки зрения семантики;Однако вы можете установить правило role=button в своем 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>

Answer 5

Попробуйте это:

tr {
    position: relative;
}

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

Это приведет к тому, что тег привязки займет всю ширину и высоту tr, при необходимости добавьте z-index к <a>

Answer 6

Попробуйте это (без 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>

Answer 7

Удалить тег «A»

и связать событие onClick в «TR»

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