I have a table that is dynamically generated. Each entry is pulled from a database. Each row contains a title, model number, and image - as its own <td>
.
The titles are all stored like this in the database:
<a href="site.com/item_01.php">Item 01</a>
so the displayed name can also be a link.
The problem is - only the title is clickable, I can't seem to move the <a>
tag outside of the relative column. I want the entire row to be clickable now.
Question: Is there a way using javascript to get the URL of a <td>
and apply at to a <tr>
that proceeds it? This would have to be all be dynamic, and each row would be different.
(I'm assuming of course to use javascript/jquery to assign the URL to each class.)
Something like this:
<tr class="the_url_that_comes later">
<td class="grab_this_class's_URL">
<a href="the_url_i need_to_get">Item_01</a>
</td>
</tr>
Or could I somehow stretch the across the other columns, maybe with absolute positioning/z-index/display:block??
Thanks for the help, I've never encountered anything like this before!
This is kind of a hack, but should work for this:
$('tr').click(function() {
$('a', $(this)).first().click();
});
Translation of code: For every tr element (every row), make the row clickable, and when it is clicked do this: Find the first 'a' (link) element inside 'this' (the row that was just clicked), and simulate clicking it.
All that said, ideally, you should store the link as a separate column in your database, and make the title a link in your front end code, instead of storing the link in the title.
Note that this solution requires jQuery.
You could just put the url in the table row
<tr class="the_url_that_comes later" data-url="the_url_i need_to_get">
<td class="grab_this_class's_URL">Item_01</td>
</tr>
Then
$('tr').on('click', function () {
window.location = $(this).data('url');
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.