Как добавить гиперссылку на строку таблицы <tr>

У меня есть таблица со строкой таблицы, которую <tr> генерирует в цикле для формирования нескольких строк.

Я хочу дать отдельную ссылку <a> на каждую <tr>. Поскольку в таблицу мы можем добавить только данные для добавления только в <td>, я не могу этого добиться.

Есть ли другой способ добиться этого? Эксперты, пожалуйста, помогите.

13 голосов | спросил Rajasekar 8 Jam1000000amSat, 08 Jan 2011 09:38:01 +030011 2011, 09:38:01

12 ответов


0

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 с использованием jQuery Library:

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

Вы можете попробовать это здесь: http://jsbin.com/ikada3

CSS (необязательно):

table tr {
    cursor: pointer;
}

ИЛИ верная HTML-версия с data-href вместо 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;
}
ответил ahmet2106 8 Jpm1000000pmSat, 08 Jan 2011 19:41:48 +030011 2011, 19:41:48
0

Воспроизведение @ ahmet2016 и поддержание его в стандарте 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;
    });
});
ответил Michael J. Calkins 1 42012vEurope/Moscow11bEurope/MoscowThu, 01 Nov 2012 07:02:01 +0400 2012, 07:02:01
0

Самый простой способ превратить строку таблицы в ссылку - использовать атрибут onclick с window.location.

<table>
<tr onclick="window.location='/just/a/link.html'">
<td></td>
</tr>
</table>
ответил jonstout 2 52012vEurope/Moscow11bEurope/MoscowFri, 02 Nov 2012 19:12:35 +0400 2012, 19:12:35
0

Если вы говорите, что хотите сделать каждый <tr> кликабельным, вы можете добавить click к каждому событию <tr> или, что еще лучше, добавьте .delegate() для обработчика table, который управляет кликами по его <tr> elements.

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

Этот код предполагает, что у вашего table есть myTable ID:

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

Если это не то, что вы имели в виду, уточните свой вопрос и опубликуйте соответствующий код JavaScript, который вы используете.

ответил user113716 8 Jam1000000amSat, 08 Jan 2011 09:44:05 +030011 2011, 09:44:05
0

Я согласен с первым ответом, необходима дополнительная информация. Но если вы просто пытаетесь создать таблицу ссылок, вы можете просто сделать

<tr><td><a href="...">...</a></td></tr>
ответил Nicole Bartley 8 Jam1000000amSat, 08 Jan 2011 10:07:44 +030011 2011, 10:07:44
0

PHP:

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

Javascript без jQuery:

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

позволит пользователю нажимать на каждую строку Вы также можете использовать массив для загрузки страниц:

 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';
 .
 }
ответил mplungjan 8 Jam1000000amSat, 08 Jan 2011 10:19:01 +030011 2011, 10:19:01
0

Рекомендуется добавить теги при создании таблицы. Если вам нужно сделать это после рендеринга таблицы и вы хотите использовать JavaScript, вы всегда можете добавить что-то вроде

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

или если вам нужно сделать это для каждой ячейки, вы всегда можете

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

Надеюсь, вы найдете это полезным

ответил CE Thomas 8 Jam1000000amSat, 08 Jan 2011 10:16:49 +030011 2011, 10:16:49
0
<tr><td><a></a></td></tr>

ответил dqhendricks 8 Jam1000000amSat, 08 Jan 2011 10:06:05 +030011 2011, 10:06:05
0

jQuery.wrap возвращенный якорь для td, а затем добавьте в tr и jQuery.appendTo table

$('ith anchor element in array').wrap('<td />').wrap('<tr />').appendTo('table#table_id');
ответил naveen 8 Jam1000000amSat, 08 Jan 2011 10:36:52 +030011 2011, 10:36:52
0

Вы можете просто сгенерировать с и изнутри, как предложила Николь:

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

Или введите URL-адрес в тег tr, например, С включенным jQuery

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

чтобы вы могли перейти на эту страницу по щелчку (в основном взломав tr для работы как тега (просто мысль, никогда не пытайтесь это сделать.

ответил Jerry Deng 8 Jam1000000amSat, 08 Jan 2011 11:15:42 +030011 2011, 11:15:42
0

добавить в

и измените стиль отображения для отображения: блок

и добавьте такой же размер для этого:

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>
ответил Abudayah 8 Jpm1000000pmSat, 08 Jan 2011 19:30:38 +030011 2011, 19:30:38
0

Вы можете использовать скрипт data-href для добавления href в любые элементы html. Это делает html действительным, так как добавляет элемент data-href к элементу.

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

ответил Fizer Khan 2 MonEurope/Moscow2013-12-02T16:17:30+04:00Europe/Moscow12bEurope/MoscowMon, 02 Dec 2013 16:17:30 +0400 2013, 16:17:30

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132