У меня есть таблица со строкой <tr> таблицы, генерируемой в цикле для формирования нескольких строк.
Я хочу дать отдельную ссылку <a> каждому <tr>. Поскольку в таблице мы можем добавлять только данные только в <td>, я не могу этого добиться.
Есть ли другой способ добиться этого?
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 Библиотека:
$(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;
}
Воспроизведение @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;
});
});
Самый простой способ, которым я нашел превращение строки таблицы в ссылку, - использовать атрибут onclick с window.location.
<table>
<tr onclick="window.location='/just/a/link.html'">
<td></td>
</tr>
</table>
Если вы говорите, что хотите сделать каждый <tr> доступным для кликов, вы можете добавить событие click к каждому <tr> или, еще лучше, добавить обработчик .delegate() в table, который управляет нажимает на его элементы <tr>.
$('#myTable').delegate('tr','click',function() {
alert( 'i was clicked' );
});
Этот код предполагает, что ваш table имеет идентификатор myTable:
<table id="myTable">
<tr><td> cell </td></tr>
<tr><td> cell </td></tr>
</table>
Если это не то, что вы имели в виду, то, пожалуйста, уточните свой вопрос и разместите соответствующий код javascript, который вы используете.
Я согласен с первым ответом, требуется дополнительная информация. Но если вы просто пытаетесь создать таблицу ссылок, вы можете просто сделать
<tr><td><a href="...">...</a></td></tr>
Премиум-предложение было бы добавить теги при создании таблицы. Если вам нужно сделать это после отображения таблицы и вы хотите использовать 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>";
}
}
Надеюсь, вы найдете это полезным
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';
.
}
<tr><td><a></a></td></tr>
jQuery.wrap возвращенный якорь в td, а затем добавить в tr и jQuery.appendTo table
$('ith anchor element in array').wrap('<td />').wrap('<tr />').appendTo('table#table_id');
Вы можете просто генерировать с и внутри, как предложила Николь:
<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, чтобы работать как тег (просто мысль, никогда не попробовать).
добавить
и измените стиль отображения для отображения: block
и добавьте такой же размер для этого:
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>
Вы можете использовать data-href script, чтобы добавить href в любые элементы html. Он делает html действительным, поскольку он добавляет только атрибут data-href к элементу.