如何向表行添加超链接<tr>

Question

I created a table, but i can't get the HTML link working, which I want to include in the tablerow.

<table class="list" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th width="10%"></th>
<th width="30%">Titel</th>
<th width="20%">Typ</th>
<th width="10%">Jahr</th>
<th width="14%">Anzahl</th>
<th width="8%"><img title="Dub" src="IMG" alt="Dub" /></th>
<th width="8%"><img title="Sub" src="IMG" alt="Sub" /></th>
</tr>
<td><img src="IMG" alt="" /></td>
<td style="padding-top: 15px;">XYXYXYXYXY</td>
<td style="padding-top: 15px;">XCXYX</td>
<td style="padding-top: 15px;">XYXYX</td>
<td style="padding-top: 15px;">XXXXX</td>
<td style="padding-top: 15px;"><img src="XYXYXYXYXY" alt="" /></td>
<td style="padding-top: 15px;"><img src="XYXYXYXYXY" alt="" /></td>
</tr>
<td><img src="XYXYXYXYXY" alt="" /></td>
<td style="padding-top: 15px;">XYXYXYXYXY</td>
<td style="padding-top: 15px;">XYXYXYXYXY</td>
<td style="padding-top: 15px;">XXXXX</td>
<td style="padding-top: 15px;">XYXYX</td>
<td style="padding-top: 15px;"><img src="XYXYXYXYXY" alt="" /></td>
<td style="padding-top: 15px;"><img src="XYXYXYXYXY" alt="" /></td>
</tr>
</tbody>
</table>

A fiddle: http://jsfiddle.net/pjPTd/

I tried it with using jquery, but i couldnt get it work.

Answer 1

To make a table row clickable, put the href inside of your row tag:

<tr href="http://www.example.com">

Then use this jquery: FIDDLE

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

Answer 2

your question is not clear at all, if you want to add a link to a table cell you can simply use the <a> tag, see bellow:

<a href="http://google.com"> click to visit google </a>

add this inside a <td> and you will get a link that takes you to google.

next time make your question clear and general so that others can use it as well.

update:

if you mean by clickable a button then you should probably visit button tag w3schools

Answer 3

Add a class and then an href to each row.

<tr class='js-clickable' href='http://www.ebay.com'>

Then create a click event, grab the URL, and finally redirect the user to that link.

$('.js-clickable').on('click', function() {

  var URL = $(this).attr("href"); 

  alert('you will be redirected to' + ' ' + redirectURL);

  window.document.location = URL;

});

Here's a FIDDLE .

Answer 4

通过使用以下代码，超链接会将<tr> <td><a href="http://google.com">click to visit google</a></td> </tr>到表格行中。