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.
I'm developing a web app with jQuery. I have a table with fixed-width columns, and javascript populated row contents.
Problem: One column has a width of 140px. Most of the sentences in this column are short and fit into this width. The font is NOT monospaced. There are a few long sentences, and there the td's have 2 lines and the height of
the row becomes greater than 20px.
I do not want this to happen, so I have to shorten the long sentences
My first idea was to fill the td with the value and shortly after that to check the height of the td or row. And when the height is larger then 20px I have to shorten the sentence.
But I think this would cause the table rows to "flicker" when the rows get the values.
So the other idea is to make a invisible div or span and to do the same thing described as before.
Is there somebody who did this before and found a good solution for my problem?
There's no way to calculate what the size of the text will be - or at least there's no portable way. You won't even be able to know for sure which font will be used.
What you might do instead is use CSS to force the td to a fixed size and ignore all overflowing text. overflow: hidden should get you going. Might also want to use white-space: nowrap as well.
You could just prevent the resizing with CSS:
table { table-layout:fixed; }
table td, table th { white-space:nowrap; overflow:none; }
What about setting the height of the cell and then using text-overflow: ellipsis?
table td { text-overflow: ellipsis; max-height: 20px; }
EDIT: fixed the fiddle - Here's an example:
JSFiddle - td and ellipsis
I have an a href inside a div, and this link inside a table cell is multiline and text-align centered.
Now the whole cell becomes clickable, since the a href is filling the whole space except a little area closest to the border. I want the area around the link-text to not be clickable, and only the text.
this is the css:
tbody td.link a{
display: inline;
font-family: Arial;
font-size: 15px;
color: #545454;
position: absolute;
padding-top: 4px;
z-index: 10;
}
Since the z-index is 10, then the link is "closer to the user" than the background, and if I change this the whole link is disabled.
I also tried this, but without result:
$('td.link').find('a').click(function(ev){
ev.preventDefault();
ev.stopPropagation();
});
Summary: Is there a way to make only the actual text characters of a link clickable, and not the background?
THanks!
You cannot, because the actual text does not constitute an element. An element always contains some empty space around the characters (not to mention their inside). But you can limit the area occupied by the element. This may mean removing its padding, setting its line height to a smaller value (maybe 1), and changing a block element to an inline element. For more specific advice, you need to provide more specific information (HTML and CSS code).
I'm guessing you have a problem with the padding:4px
since padding is part of the element, it becomes clickable. I would suggest, using margin,
or padding on the parent element. (you could use box-sizing:border-box, to solve any sizing problems.)
You add this style
tbody td.rank a{
text-decoration:none;
}
Good day... yes I am a nOOb. So I apologize for my nOObness right off the top. I have searched this site and many like it for a week without any resolution. I believe my problem is unique.
I have a site with about 10 pages that I am creating that have lots and lots of tables on them. Most of the tables are formatted the same way so I immediately went to CSS for my needs.
So now I am trying to understand CSS and selectors and how to combine them etc.
Here is my dilemma. I have created a tag style for the <td> tag which works great on about 95% of everything I am doing. I have also created an "override" class for it for those instances when I want to align left and indent the <td>:
TD {
text-align: center;
vertical-align: middle;
all other rules;}
td.overide_l {
text-align: left;
vertical-align: middle;
padding-left: 1em;
all other rules;}
My problem comes from a piece of corporate controlled javascript that creates a lefthand nav menu. Apparently, there are td's in that code that is affected by my rule. The problem is that the javascript is not something that I can make changes to. It is a corporate script saved on a corporate site, yet needs to be on each of my pages.
If I change the <td> style to left align the script will align to the left. If I remove the <td> tag all together it will align to the left. If I make the <td> style center aligned like I want it, the script center aligns the left nav and I can't override it.
I have tried a thousand things. I tried to put the script in a separate table with the class override in it, I tried placing it in a separate td that surrounded it, I have put the class="overide_l" class in a <span>.
Lastly, I tried creating <div>'s that had id's associated with them which worked, but then my Class="overide_l" (and a plethora of other class styles I had created), didn't work within the new divs anymore...
div#content-section td {
text-align: center;
vertical-align: middle;}
Ultimately what I want to do is leave the tag style like it is at the top of this post and simply create a <div> or something that will shut off the <td> tag style for that one piece of code. Is this even possible?
Can you please help me!
Can't you just do the same thing you did with your td selector with your override class?
#content-section td.overide_l {
text-align: left;
vertical-align: middle;
padding-left: 1em;
}
The problem is specificity:
100 points for an ID selector
10 points for a class selector
1 for a tag selector
If you add up the selectors, you get the selector that will take precedence.
In your case:
td.overide_l = 11
div#content-section td = 102
So the second wins. Changing td.overide_l to #content-section td.overide_l will make it 111.
What you need to do here is be more specific in your css rules. Putting a rule on all elements (td) is a bad idea for exactly the reason you are illustrating here. Have the tables in your code have a different class so that your CSS rules know the difference between those and the nav tds. Also, if you guys are using tables for so much, you guys are going to have a bad time.
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.