web-dev-qa-db-fra.com

Ajouter un lien hypertexte à la ligne du tableau <tr>

J'ai une table avec sa ligne de table <tr> générant dans une boucle pour former plusieurs lignes.

Je veux donner un lien séparé <a> à chaque <tr>. Comme dans le tableau, nous pouvons uniquement ajouter des données à <td> uniquement, je ne suis pas en mesure d'y parvenir.

Y a-t-il un autre moyen d'y parvenir? Les experts aident s'il vous plaît.

javascriptphpcsshtml-table
13
Rajasekar

Html:

<table>
    <tr href="http://myspace.com">
      <td>MySpace</td>
    </tr>
    <tr href="http://Apple.com">
      <td>Apple</td>
    </tr>
    <tr href="http://google.com">
      <td>Google</td>
    </tr>
</table>

JavaScript en utilisant jQuery Library:

$(document).ready(function(){
    $('table tr').click(function(){
        window.location = $(this).attr('href');
        return false;
    });
});

Vous pouvez essayer ceci ici: http://jsbin.com/ikada3

CSS (facultatif):

table tr {
    cursor: pointer;
}

OU la version HTML valide avec data-href au lieu de href:

<table>
    <tr data-href="http://myspace.com">
      <td>MySpace</td>
    </tr>
    <tr data-href="http://Apple.com">
      <td>Apple</td>
    </tr>
    <tr data-href="http://google.com">
      <td>Google</td>
    </tr>
</table>

JS:

$(document).ready(function(){
    $('table tr').click(function(){
        window.location = $(this).data('href');
        return false;
    });
});

CSS:

table tr[data-href] {
    cursor: pointer;
}
29
ahmet2106

Jouer hors de @ ahmet2016 et le garder au standard W3C.

HTML:

<tr data-href='LINK GOES HERE'>
    <td>HappyDays.com</td>
</tr>

CSS:

*[data-href] {
    cursor: pointer;
}

jQuery:

$(function(){       
    $('*[data-href]').click(function(){
        window.location = $(this).data('href');
        return false;
    });
});
10
Michael J. Calkins

Le moyen le plus simple que j'ai trouvé de transformer une ligne de table en lien est d'utiliser l'attribut onclick avec window.location.

<table>
<tr onclick="window.location='/just/a/link.html'">
<td></td>
</tr>
</table>
8
jonstout

Si vous dites que vous voulez rendre chaque <tr> cliquable, vous pouvez ajouter un événement click à chaque <tr> ou, encore mieux, ajouter un gestionnaire .delegate() à la table qui gère les clics sur ses éléments <tr>.

$('#myTable').delegate('tr','click',function() {
    alert( 'i was clicked' );
});

Ce code suppose que votre table a l'ID myTable: 

<table id="myTable">
    <tr><td> cell </td></tr>
    <tr><td> cell </td></tr>
</table>

Si ce n'est pas ce que vous vouliez dire, clarifiez votre question et publiez le code javascript approprié que vous utilisez.

2
user113716

Je suis d'accord avec la première réponse, plus d'informations sont nécessaires. Mais si vous essayez juste de faire une table de liens, vous pouvez simplement faire 

<tr><td><a href="...">...</a></td></tr>
1
Nicole Bartley

La suggestion consiste à ajouter les balises lorsque vous générez le tableau. Si vous avez besoin de le faire après le rendu de la table et que vous voulez utiliser javascript, vous pouvez toujours ajouter quelque chose comme:

var mytable = document.getElementById("theTable")
var myrows = mytable.rows

for(i=0;i < myrows.length;i++)
{
  var oldinner;
  oldinner = myrows[i].cells[0].innerHTML;
  myrows[i].cells[0].innerHTML = "<a>" + oldinner + "</a>";
}

ou si vous avez besoin de le faire à chaque cellule, votre peut toujours

var mytable = document.getElementById("theTable")
var myrows = mytable.rows

for(i=0;i < myrows.length;i++)
{
  mycells = myrows[i].cells;

  for(a=0;a < mycells.length;a++)
  {
    var oldinner;
    oldinner = mycells[a].innerHTML;
    mycells[a].innerHTML = "<a>" + oldinner + "</a>";
  }
}

J'espère que ça t'as aidé

1
CE Thomas

PHP:

echo "<tr onclick=\"window.location='".$links[$i]."'\">......";

Javascript sans jQuery:

 x=1;
 .
 .
 for (...) {
   var tr=document.createElement('tr');
   tr.onclick=function() { window.location='page'+(x++)+'.html'}
   tr.style.cursor='pointer';
 .
 }

laissera l'utilisateur cliquer sur chaque lignevous pouvez également utiliser un tableau pour charger les pages:

 x=0;
 var pages=["pagea.html","pageb.html"]
 .
 .
 for (...) {
   var tr=document.createElement('tr');
   tr.onclick=function() { window.location=page[x++];}
   tr.style.cursor='pointer';
 .
 }
1
mplungjan
<tr><td><a></a></td></tr>

ce?

0
dqhendricks

jQuery.wrap l'ancre retournée dans une variable td, puis ajouter à tr et jQuery.appendTotable

$('ith anchor element in array').wrap('<td />').wrap('<tr />').appendTo('table#table_id');
0
naveen

Vous pouvez utiliser le script data-href pour ajouter du href dans n'importe quel élément HTML. Il rend le code HTML valide puisqu'il ajoute uniquement l'attribut data-href à un élément.

https://github.com/nathanford/data-href/

0
Fizer Khan

Vous pouvez simplement créer le avec et à l'intérieur comme l'a suggéré Nicole:

<tr><td><a href="url">title of the url</a></td></tr>

Ou mettez l'URL dans la balise tr comme Avec jQuery inclus

$('tr.clickable').click(function(){
  window.location = $(this).attr("title");
});

pour vous amener à cette page sur clic (pirater un tr pour fonctionner comme un tag (juste une pensée, ne jamais l'essayer vraiment).

0
Jerry Deng

ajouter à 

et changer le style d'affichage pour afficher: bloc

et ajoutez la même taille pour ceci:

CSS: 

#Table a {
display:block;
}
#Table td {
width:100px;
hright:100px
}

HTML: 

<table id="Table">
    <tr><td><a onclick="" href="#"> cell </a></td></tr>
    <tr><td> cell </td></tr>
</table>
0
Abudayah