1
votes

Comment rendre cliquable en tant que lien au lieu de cellule?

Cela doit être très facile et simple, mais j'ai du mal à le faire.

J'ai une liste de lignes avec 6 colonnes qui montre les données de mysql. Je voudrais rendre chaque ligne cliquable à la place de la cellule qui ouvre une nouvelle URL dans un nouvel onglet.

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

Méthode ci-dessus Ne fonctionne pas. Toute aide est appréciée

javascript jquery html css bootstrap-4

1 commentaires

Copie possible de Rendre la ligne du tableau cliquable

7 Réponses :

1
votes

Supprimer la balise "A"

et lier l'événement onClick à "TR"

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

3 commentaires

Expliquez au moins comment utiliser le click () de jQuery ou addEventListener . L'utilisation de onclick n'est qu'un mauvais conseil en 2019.

@ Mike'Pomax'Kamermans Merci Mike. Tu as raison. Je lui donne juste un indice. :-)

ce n'est pas à cela que sert SO. Ne donnez pas seulement des indices, donnez des réponses =)

3
votes

Essayez ceci (sans 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>

0 commentaires

1
votes

Essayez ceci:

tr {
    position: relative;
}

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

Cela fera que la balise d'ancrage occupe toute la largeur et la hauteur du tr, si nécessaire, ajoutez z-index à

0 commentaires

0
votes

Je voudrais dire que ce n'est pas correct du point de vue sémantique; Cependant, vous pouvez définir la règle role = button dans votre html.

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

table {
  border-collapse: collapse;
}

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

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

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

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

0 commentaires

0
votes

Vous pouvez utiliser jQuery et la fonction de clic. Cette approche est simple et vous donne la liberté de décider quelles lignes sont utilisées comme liens. Tout ce que vous avez à faire est d'ajouter une classe et un attribut de données. Vous pouvez également ajouter la propriété cursor: pointer dans CSS.

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

.click{cursor:pointer}

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

0 commentaires

0
votes

Prenons l'exemple suivant:

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

HTML

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

JavaScript

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

0 commentaires

0
votes

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

0 commentaires