webentwicklung-frage-antwort-db.com.de

So fügen Sie der Tabellenzeile <tr> einen Hyperlink hinzu

Ich habe eine Tabelle, deren Tabellenzeile <tr> in einer Schleife generiert wird, um mehrere Zeilen zu bilden.

Ich möchte jedem <a> einen eigenen <tr>-Link geben. Da wir in der Tabelle nur Daten nur zu <td> hinzufügen können, kann ich das nicht erreichen.

Gibt es einen anderen Weg, um dies zu erreichen? Experten helfen bitte.

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 mit jQuery Library:

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

Sie können dies hier versuchen: http://jsbin.com/ikada3

CSS (optional):

table tr {
    cursor: pointer;
}

ODER die gültige HTML-Version mit data-href anstelle von 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

@ Ahmet2016 wird abgespielt und der W3C-Standard beibehalten.

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

Die einfachste Möglichkeit, eine Tabellenzeile in eine Verknüpfung umzuwandeln, besteht im Verwenden des Attributs onclick mit window.location.

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

Wenn Sie sagen, dass Sie jeden <tr> anklickbar machen möchten, können Sie jedem <tr> ein click -Ereignis hinzufügen, oder besser noch einen .delegate() -Handler zum hinzufügen table, mit dem Klicks auf die <tr> -Elemente verwaltet werden.

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

Dieser Code setzt voraus, dass Ihr table die myTable ID hat:

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

Wenn dies nicht das ist, was Sie gemeint haben, klären Sie bitte Ihre Frage und geben Sie den entsprechenden JavaScript-Code ein, den Sie verwenden.

2
user113716

Ich stimme der ersten Antwort zu, weitere Informationen werden benötigt. Wenn Sie jedoch nur versuchen, eine Link-Tabelle zu erstellen, können Sie dies einfach tun 

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

Der Premium-Vorschlag wäre, die Tags beim Generieren der Tabelle hinzuzufügen. Wenn Sie dies tun müssen, nachdem die Tabelle gerendert wurde und Sie JavaScript verwenden möchten, können Sie immer etwas hinzufügen

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

oder wenn Sie es für jede Zelle tun müssen, können Sie immer

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

Ich hoffe, du findest das hilfreich

1
CE Thomas

PHP:

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

Javascript ohne jQuery:

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

der Benutzer kann auf jede Zeile klicken.

 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>

diese?

0
dqhendricks

jQuery.wrap der zurückgegebene Anker zu einer td und dann zu tr und jQuery.appendTotable

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

Sie können das Skript data-href verwenden, um in jedem HTML-Element href hinzuzufügen. Es macht html gültig, da es einem Element nur das data-href-Attribut hinzufügt.

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

0
Fizer Khan

Sie können einfach das mit und innen generieren, wie es Nicole vorgeschlagen hat:

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

Oder setzen Sie die URL in das tr-Tag wie Mit jQuery

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

um Sie auf diese Seite zu bringen (im Grunde hacken ein tr, um wie ein Tag zu arbeiten (nur ein Gedanke, versuchen Sie es nie wirklich).

0
Jerry Deng

füge hinzu 

und ändern Sie den Anzeigestil, um anzuzeigen: Block

und füge dieselbe Größe für so hinzu:

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