Making a Table Row clickable - javascript

I wonder what the best way to make an entire tr clickable would be?
The most common (and only?) solution seems to be using JavaScript, by using onclick="javascript:document.location.href('bla.htm');" (not to forget: Setting a proper cursor with onmouseover/onmouseout).
While that works, it is a pity that the target URL is not visible in the status bar of a browser, unlike normal links.
So I just wonder if there is any room for optimization? Is it possible to display the URL that will be navigated to in the status bar of the browser? Or is there even a non-JavaScript way to make a tr clickable?

If you don't want to use javascript, you can do what Chris Porter suggested by wrapping each td element's content in matching anchor tags. Then set the anchor tags to display: block and set the height and line-height to be the same as the td's height. You should then find that the td's touch seamlessly and the effect is that the whole row is clickable. Watch out for padding on the td, which will cause gaps in the clickable area. Instead, apply padding to the anchor tags as it will form part of the clickable area if you do that.
I also like to set the row up to have a highlight effect by applying a different background color on tr:hover.
Example
For the latest Bootstrap (version 3.0.2), here's some quick CSS to show how this can be done:
table.row-clickable tbody tr td {
padding: 0;
}
table.row-clickable tbody tr td a {
display: block;
padding: 8px;
}
Here's a sample table to work with:
<table class="table table-hover row-clickable">
<tbody>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
</tbody>
</table>
Here's an example showing this in action.

With jQuery you can do something along these lines:
$('tr').click(function () {
$(this).toggleClass('highlight_row');
});
Then add a highlight_row to your CSS file and that row will change its class to highlight_row. You could swap out whatever you want to do in that line (as well as change $('tr') to fit your specific row.

I have found this solution which works quite well:
$(document).ready(function() {
$('#example tr').click(function() {
var href = $(this).find("a").attr("href");
if(href) {
window.location = href;
}
});
});
Just don't forget to style the cursor as a pointer on tr:hover
#table tr:hover {cursor: pointer;}
Source: http://www.electrictoolbox.com/jquey-make-entire-table-row-clickable/

"
The most common (and only?) solution seems to be using JavaScript, by using onclick="javascript:document.location.href('bla.htm');" (not to forget: Setting a proper cursor with onmouseover/onmouseout).
"
The onclick-command should look like this:
onclick="window.location.href='bla.html';"
And it isn't necessary to do anything onmouseover/-out about the cursor as a cursor-property only works when the mouse is hovering the element:
style="cursor:pointer;"

Another approach is to actually linkify the contents of each cell. You could change the style if necessary so they don't look like traditional links.
Note that what you are trying to do does break the intuitive user experience a little bit. It needs to be clear that clicking on a row does something. I usually prefer to put an icon at the edge of each row (a magnifying glass, etc.) which drills into a new page.

Fortunately or unfortunately, most modern browsers do not let you control the status bar anymore (it was possible and popular back in the day) because of fraudulent intentions.
Your better bet would be a title attribute or a javascript tooltip.

If your table does not have links inside, following trick should work.
Put entire table into a link and change the href attribute of the link in rows onmouseover events.
Demo code:
<script type="text/javascript">
function setLink(elRow) {
var elLink = document.getElementById('link');
elLink.href = elRow.rowIndex + ".com";
}
</script>
...
<a id=link>
<table>
<tr onMouseOver="setLink(this);"><td>first row</td></tr>
<tr onMouseOver="setLink(this);"><td>second row</td></tr>
</table>
</a>

I realise this is an old thread with a perfectly legit solution in Alice's answer. There is however also a way to do this without javascript AND without duplicating your link * the number of columns AND keeping your markup/CSS valid. It took me a while to figure out, so I thought I'd post it here for others that also happen to end up on this thread like I did.
Put the link in the first column:
<table class="search_results">
<tr>
<td>Some text</td>
<td>more text</td>
<td>more text</td>
</tr>
</table>
This is perfectly fine markup, so your only real issue is getting that link to span the width of your table. I did it like this using pretty standard CSS:
table.search_results a {position:absolute;display:block;width:98%;}
Change the width to whatever you want and in principle you are done and dusted. So that is all relatively easy, however if you, like me, have a fluid/responsive layout, and also some standard styling on your links plus some padding on your tables, you are going to need these rules (copied necessary from above and added extra).
table.search_results td:first-child {padding:0;}
table.search_results a {position:absolute;display:block;width:98%;max-width:1272px;font-weight:normal;color:#000;padding:.5em;}
table.search_results a:hover {background:none;}
table.search_results tr:hover {border-color:#25505b;background:#b5d6dd;}
To explain:
The first rule removes all padding on my first td ONLY. By default the padding on my td is .5em.
The second rule adds the same padding back on the link, otherwise you end up with misaligned cell contents. It also corrects a few standard styles I have on my a to ensure the columns all look the same. You could do this the other way around too (add the link styles to your td).
With the last two rules I get rid of the default hover effect on my links, then put it on the tr for any tables with the right class.
This works in the browsers I care about, but you should of course test in those you care about :) Hope I help save someone some minutes with this writeup!

It's a hack but you can add this to your tr:
onmouseover="window.status='http://bla.com/bla.htm'"
don't forget to style your fake links:
tr.clickable {
cursor: hand;
cursor: pointer;
}

You might also try wrapping the content of your row's cells in an href and using CSS to push the href height/width to the internal bounds of each cell. The row itself wouldn't be clickable (unless you added additional html to the row) but most of the content space of the row would act like a normal link (cursor, status bar, etc). I can't remember off hand exactly how I did this before but I was reasonably successful getting this to work.
Edit: A comment asked for more details and they were covered by a later post from another user but I didn't realize that until I looked further into this suggestion and tested it.
If you add "display: block" CSS style tag to the anchor objects in the cells that you want to be clickable it will make the entire cell (minus any padding) act like a button. The cursor is displayed correctly and it previews the link destination in the status bar. This is all done with zero javascript. Good luck.

I had that same problem, I solved it by using CSS only. I think it was the best solution for me, because I was using it in JSF also.
Just assign the style class to the table and you are good to go....
Here it goes:
CSS:
.myDataTable {
background: 444;
width: 100%;
}
.myDataTable thead tr {
background-image: url('../img/tableHeader.jpg');
}
.myDataTable thead tr th {
height: 28px;
font-size: 14px;
font-family: tahoma, helvetica, arial, sans-serif;
padding-left: 5px;
}
.myDataTable thead tr th img {
padding-right: 5px;
padding-top: 1px;
}
.myDataTable thead tr td {
height: 15px;
font-size: 11px;
font-weight: bold;
font-family: tahoma, helvetica, arial, sans-serif;
padding-left: 5px;
}
.myDataTable tbody {
background: #f2f5f9;
}
.myDataTable tbody tr:nth-child(even) td,tbody tr.even td {
background: #e2ebf4;
font-size: 12px;
padding-left: 5px;
height: 14px;
}
.myDataTable tbody tr:nth-child(odd) td,tbody tr.odd td {
background: #f7faff;
font-size: 12px;
padding-left: 5px;
height: 14px;
}
.myDataTable tbody tr:hover td {
background-color: #e7e7e7;
}
.myDataTable tbody tr td {
height: 14px;
padding-left: 5px;
font-size: 12px;
}
.myDataTable tbody tr td a {
color: black;
text-decoration: none;
font-size: 12px;
display: block;
}
.myDataTable thead tr th a {
color: black;
text-decoration: none;
font-size: 12px;
display: inline;
}
Your table structure should be:
<table class="myDataTable">
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1 </td>
<td>Data 2 </td>
</tr>
</tbody>
</table>

If your targeted browsers all support CSS Table display styles, you can use Javascript to wrap each row in an <a> tag styled to function as a <tbody>.
Here's some JS code using jQuery to make it happen: (jsfiddle)
$(function() {
$('.table-linked').each(function() {
var table, tbody;
table = this;
tbody = $('tbody', this);
tbody.children().each(function() {
var href, row;
row = $(this);
href = row.attr('data-href');
$('<a href="' + href + '" style="display: table-row-group" />').append(row).appendTo(table);
});
tbody.remove();
});
});
This code will transform a table that looks like this:
<table class="table-linked">
<tbody>
<tr data-href="/a"><td>a</td><td>1</td></tr>
<tr data-href="/b"><td>b</td><td>2</td></tr>
</tbody>
</table>
Into this DOM structure in the browser:
<table>
<a href="/a" style="display: table-row-group">
<tr><td>a</td><td>1</td></tr>
</a>
<a href="/b" style="display: table-row-group">
<tr><td>b</td><td>1</td></tr>
</a>
</table>
Browsers don't seem to be capable of parsing this structure as HTML code (and needless to say it won't validate), it needs to be constructed using JS

Marko Dugonjic, in his blog maratz.com, explained how you detect a table row index with Javascript. In his example, when you mouse over any cell in a row, the entire row is highlighted.
See example,
http://webdesign.maratz.com/lab/row_index/
and his article,
http://www.maratz.com/blog/archives/2005/05/18/detect-table-row-index-with-javascript/
With a change, you can adapt this further by placing an onclick action.

If you're already relying on javascript for the click, then you can also use javascript to show the url in status area, change the cursor, or do other things so it looks more like a link. Of course, the browser may ignore the code that sets the status area.

Related

Javascript/JQuery: How do I select the link inside a <td> element when it has a certain style

There is a website with multiple td elements. I need to a way to click on all the href links inside the td element if it matches a certain style.
Here is what the td element typically looks like
<td style="font-size: 12px; text-align: center; font-weight: bold;"><a class="theclass" href="https://youtube.com" target="_blank">Link</a></td>
Can someone please help guide me on how to do this properly? I tried an if statement to see if the td style matches "font-size: 12px; text-align: center; font-weight: bold;", but it didn't work at all.
Edit: This isn't my website. Sorry, I didn't include this.
It sounds like you are going to have to do a Javascript loop.
function clickCertainStyles() {
$('td').each(function(i, td) {
var $td = $(td);
if ($td.css('font-size') == '12px' && $td.css('text-align') == 'center')
$td.find('a').trigger('click')
})
}
You can make it faster if you pass in a table container, so you aren't searching the whole page for every TD reference.
This will select the td element above:
$('td[style*="font-weight:bold"]')
You'll have to experiment with what works and what doesn't. I tried things like width: 100px and it wouldn't work; presumably anything with a pixel value in it is in some way ambiguous. However, if I used just width it worked for any element that had a width specified.
Note that this only works with inline styles.

Make clickable link inside clickable box (ActionLink inside <a href>)

I am trying to make a whole table row clickable and have done so using javascript. However, this does not let you see the target link in the status bar and also prevents you from opening these links in new tabs.
Therefore, I have been trying the following:
<tr>
<td>#Html.ActionLink(...)</td>
<td>#Html.ActionLink(...)</td>
<td>#Html.ActionLink(...)</td>
</tr>
Then using display:block; on the anchors to make the full row clickable.
tr:hover {
background: red;
}
td a {
display: block;
border: 1px solid black;
padding: 16px;
}
However, I can no longer click the action link, wherever I click on the table row, it takes me to whatever I have in the anchor.
That leads me to my question. How can I make it so that if I click anywhere in the row, it takes me to my anchor, but if I click precisely on the action link, it takes me to where that is set.
Any help is greatly appreciated.
Someone has written a plugin for Bootstrap 3 that makes this easy to do. Jasny Bootstrap has "Row Links" which allow you do to the following:
<tbody data-link="row" class="rowlink">
<tr>
<td>First Link</td>
<td>Some text</td><td class="rowlink-skip">Action</td>
</tr>
</tbody>
where the entire row will link to #wholerow and the <a> tag will link to #

Autocopy text inside html table

Hope everyone's doing okay. I have created an HTML with some CSS. What it does is it highlights the table on hover and highlights the entire text line inside the table on click. Next thing that I wanted to achieve is to autocopy the highlighted text or do autocopy on click. I tried some google chrome autocopy extension, however, it's not working. Just like it's not working on google spreadsheet cells.
I've been thinking about javascript, but I'm not really sure if this can be done to autocopy a highlighted text inside an HTML table.
Any advice or tips on this one?
<script>
if (!('select' in HTMLTableCellElement)) {
HTMLTableCellElement.prototype.select = function() {
var range = document.createRange();
range.selectNodeContents(this);
window.getSelection().addRange(range);
}
}
</script>
<style type="text/css">
table{
table-layout: fixed;
width: 170px;
height: 35px;
font-size: 14px;color:#333333;width:100%;border-width: 1px;border-color: #9dcc7a;border-collapse: collapse;
}
table td {
font-size: 12px;border-width: 1px;padding: 10px;border-style: solid;border-color: #9dcc7a;
overflow: hidden;
text-overflow: ellipsis;
width: 225px;
white-space: nowrap;
}
table th {
font-size:12px;color: black; background-color:#ffff99; border-width: 1px;padding: 8px;border-style: solid;border-color: #9dcc7a;
text-align: center;
width: 230px;
}
#table tr {background-color:#ffffff;}
#table tr:hover {background-color:#ffff99;}
::selection {
background-color: orange;
color: blue;
}
#tableheader
th {
font-size:12px;background-color:#abd28e;border-width: 1px;padding: 8px;border-style: solid;border-color: #9dcc7a;
text-align: left;
width: 230px;
</style>
</head>
<body>
<table class="table" border="1">
<tr><th>Header</th></tr>
<tr><td onclick="this.select()">This will be highlighted on click. It should also be copied to clipboard automatically</td></tr>
</table>
I'm looking forward to hearing back from you.
Best,
Jason
You can indeed use JavaScript (and especially some libraries) to achieve copying some text (possibly from somewhere in your current page) directly into the user's clipboard.
Please refer to that post which uses the clipboard.js library.
The idea is to add a specific class (e.g. btn) to the elements which should be clickable and which content must be copied to clipboard on click.
<td class="btn">This will be ...</td>
Then add the functionality following Clipboard API:
var clipboard = new Clipboard('.btn', {
// The selection of the correct content is done here.
text: function(trigger) {
return trigger.innerHTML;
}
//clipboard.js will take the entire inner content of the clicked element.
});
Demo for your case: http://jsfiddle.net/kv9ymLjn/
You can also re-implement the content highlighting (Clipboard does not need that, but it gives a visual feedback to the user). See the demo code.
As shown in the post linked in the question comments, the safest way is to let the user performing the actual copying action (e.g. Ctrl + C), while helping him/her by auto highlighting the desired text.
The Clipboard library on the other hand may not work in all environments, even though the most common are covered.

JQuery / Javascript - ".click()" method not entirely working?

I have a table with empty divs at first and with Javascript and JQuery, I created an array of works and whatever words are in the Array, I put those words into the td. Here is my html:
<div id="sideBar">
<table id="sideTable">
<tr><td id='row0'></td></tr>
<tr><td id='row1'></td></tr>
<tr><td id='row2'></td></tr>
<tr><td id='row3'></td></tr>
<tr><td id='row4'></td></tr>
<tr><td id='row5'></td></tr>
<tr><td id='row6'></td></tr>
<tr><td id='row7'></td></tr>
<tr><td id='row8'></td></tr>
</table>
</div>
and my Javascript array, if it were this
var tableHeadings = ['headingOne', 'headingTwo', 'headingThree'];
then the Javascript will hide #row3 till #row8 and the three headings will be inputted into #row0, #row1 and #row2 respectively. The td's take the size of the longest td in the row. This part of the code works! I also have two Javascript functions, one for hovering over the td and the other for when you click the td. The one where you hover over the td, the Javascript starts like this
$('#sideTable td').hover(
and the one where you click the td, the Javascript begins like this
$('#sideTable td').click( function() {
The problem is that when you hover over the word, the hover function is perfect, but when I go to click the td, even if the width of the td is really long / there is a lot of information inside the td (say the information in the td is so long that the width of the td becomes 200px), it only allows you to click the first I think 85px of the td. It's so weird. Even if I do
#sideBar td {
width: 120px;
}
and make the width of every td 120px, it still would only allow me to click the first 85px of the td. The hovering is perfect, the moment I hover over a td, regardless of where I hover (regardless of if it is inside the first 85px of the td or not) and regardless of how long the td is, the hover function works and executes perfectly. However, for some reason, the click function only allows me to click inside the first 85px or so of the heading. Why is this?
Note: Even if I try setting the width of the td using Javascript like so
$('td').css('width','200');
it still only allows me to click in the first 85px of the td. If I hover over the rest 115px of the td, the cursor won't even change to a pointer. It doesn't recorgnize for some reason that there is a td there.
The CSS is this
#sideBar td {
font-size: 12px;
}
#sideBar {
position: absolute;
top: 90px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
Also note that I am using I.E8 and not CSS3 and that there is A lot of JS which I wrote and it is quite messy so if I uploaded it, this thread would get downvoted. The JS doesn't really effect the width or anything of the TD though, it is just "if td is hovered then do all of this and if td is click, do this". The problem isn't with the JS code, it's just that the "if td is clicked" only works for the first 85px or so of the td regardless of if the td is longer than that.
Try editing your CSS to handle overflow:
overflow-wrap: break-word
overflow-x: visible
Sounds like a CSS thing not a jquery problem. Inspect the elements and see if the mouse even makes it over the whole width of the td.

IE8 doesn't apply css display dynamically

I'm trying to develop a table that hides its columns upon a given value. I am using a solution discussed in another SO question. As part of the suggestion there they say that to support IE<8 browsers a hide rule should be used instead and show by default. (My browser is in quirks mode).
I have several hide rules that look like the following.
table.Show1 .cellType2, table.Show1 .cellType3{
display:none;
}
So what I expect is cellType2 and cellType3 to hide when the className of the table is changed dynamically. With the initial values it works fine but when the className of the table changes dynamically, it hides the cells needed but it doesn't bring the other back.
I went through it with IE Developer Tool and I know that the className of the table is set properly. I also inspected the cell element's style and there is no display rule set so I would expect to display as default, but it isn't(it doesn't show up).
What I found most annoying it that if I change ANY style property in the Developer Tool, it will realize that it should be displaying the cell and then , it brings it back up.
Why the style is not applied? Please help me fix this issue.
EDIT:
I'm including a "minimal" code to recreate the issue.
JavaScript:
function typeChanged(name, id)
{
var elem = document.getElementById(id);
elem.className = name;
}
CSS:
table td
{
border-top: 1px none #000066;
border-right: 1px none #000066;
border-bottom: 1px solid #000066;
border-left: 1px solid #000066;
}
table.Show1 .cellType2, table.Show2 .cellType1{
display:none;
}
table.Show1 td,table.Show2 td
{
border-style: solid solid solid solid;
border-width: 1px;
}
table.Show1 th,table.Show2 th,table.Show1,table.Show2
{
background: transparent none repeat scroll 0% 0%;
color: #000066;
border-style: none none none none;
table-layout: fixed;
}
HTML:
<select onChange="typeChanged(this.options[this.selectedIndex].value,'mytable')">
<option value="Show1">Show1</option>
<option value="Show2">Show2</option>
</select>
<table id="mytable" class="Show1">
<tr>
<th class="cellType1">type1</th>
<th class="cellType2">type2-a</th>
<th class="cellType2">type2-b</th>
</tr>
<tr>
<td class="cellType1"><input type="text"></input></td>
<td class="cellType2"><input type="text"></input></td>
<td class="cellType2"><input type="text"></input></td>
</tr>
</table>
It sounds like it's not repainting the table. There are several IE 7 & 8 repaint and reflow oddies out there...
You can try forcing the repaint in your javascript, maybe just by hiding and showing the table with something like
document.getElementById('myTable').style.display='none';
document.getElementById('myTable').style.display='table';
or forcing a reflow on the entire page with something like
document.body.className=document.body.className;
It appears that there is a problem when trying to repaint the cells. Just from the CSS rule doesn't work but if we apply the display directly in the JavaScript then the cells are drawn properly. Looping trough the cells and applying the style directly works, I just had to have a name convention to easily identify the class that a cell is supposed to be.
if(isEmpty(cell.className)|| cell.className == (selectedType+"_cell"))
{
cell.style.display = 'table-cell'; // might be different for other IE versions
}
else
{
cell.style.display = 'none';
}

Categories

Resources