We Keep Coding

How to make my scrollTo on a column in a table working in Javascript?

I'm trying to scroll a column to the bottom, but it's not working. Does anyone know how to cope with that?
Here's my simple code:
<table>
<tbody>
<tr>
<td id='Trigger_td'>
sometext
</td>
<td id='My_td' style='overflow:scroll;display:block;height:50vh'>
sometext
</td>
</tr>
</tbody>
</table>
And in my .js file:
$("#Trigger_td").on("click",function(){
//Other stuff that fill "#My_td" with content that make it overflow
$("#My_td").get(0).scrollTo(0,$("#My_td").get(0).scrollHeight);
});
I hope I gave you all the important info about it (first time here to write questions). I guessed that it was because when click triggers My_td is not yet "ready" to scroll. I tried to put a setTimeout, but it didn't work.
THANK YOU VERY MUCH

Have you tried Element.scrollIntoView()?
document.getElementById('My_td').scrollIntoView();

Slidetoggle not working on group of rows

I am struggling with Jquery Slidetoggle , it is not working on tr and td tags, this is small eample I tried in Jsfiddle, in fact my original code has dynamically generated tr and td tags in a loop and I need to exapand and collapse the tr sections
I even tried in JSfiddle, please help me to find out if my javascript code to drilldown to class "section" is wrong.
https://jsfiddle.net/jsfiddleuser0601/dxgwreyw/1/
$('.show').click( function() {
alert ("show clicked");
var content= $(this).closest('tbody').next('.section');
// var content = $(this).closest('tbody').find('.section');
var title = content.is(':visible') ? "Show" : "Hide";
content.slideToggle('slow');
alert("slide toggle operated");
$(this).text(title);
});
<table >
<tbody>
<tr>
<td class="show">Show
</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="section">
section 1
</td>
</tr>
<tr>
<td class="section">
section 1
</td>
</tr>
</tbody>
</table>

I am not sure what you are trying to achive right now. I feel the HTML syntax is not really full so there might be problems helping you out with the jQuery.
First of all, you haven't included jQuery library in your fiddle thats why nothing is working there.
$('.show').click(function() {
alert("click clicked");
$('.section').parent().each(function(){
$(this).slideToggle();
});
});
Please see https://jsfiddle.net/dxgwreyw/4/ fiddle for more understanding how it could possibly work.

Table with multiple inner tables and Fixed Header Table with Horizontal Scroll

I have been working with a table which has 3 inner tables. and the third table being wider in width and has horizontal scroll.
I have been trying to fix the header for each table and trust me I tried all the solutions but none of the solution over the internet has the same thing as I do (or may be I couldn't find one)
I tried various plugins floathead and fixedheadertable but the horizontal thing breaks it.
I have my jsfiddle example up can anyone show me the way maybe
http://jsfiddle.net/warlockdn/qyrjvnvv/2/
I am open to restructure the table but not sure what way to take ?
This is the basic structure
<table>
<thead>
<tr>
<td> </td>
<td>Latest</td>
<td>Oil Majors</td>
</tr>
</thead>
<tbody>
<td>
<table></table>
</td>
<td>
<table></table>
</td>
<td>
<table></table>
</td>
</tbody>
</table>

Use jQuery with scroll event to make this. Try:
$(document).ready(function() {
$.each($("thead"),function(){
$(this).css({position:'relative'})
})
$(window).scroll(function(){
$("thead").css({top:$(window).scrollTop()})
})
})
Example: http://jsfiddle.net/uj313udL/
UPDATE
I've modified a lot of your code. I've added width on all headers. It works fine with Firefox and Chrome. Please try:
Example: http://jsfiddle.net/nzdhs4wq/

So,
I got the table to work as I needed with the help from #Frank.
Used the code he gave. Since the table won't take position relative to row or column. I added a div inside each under and changed the jquery code to catch the class.
$.each($(".stick_top"),function(){
$(this).css({position:'relative'})
})
$(window).scroll(function(){
console.log($(window).scrollTop())
$(".stick_top").css({top:$(window).scrollTop()})
})
http://jsfiddle.net/warlockdn/uj313udL/8/
It works fine now. Thank you Frank.

Selecting the secondary preceding element

<tr class="main"></tr>
<tr class="emails-details">
<button>some button</button>
</tr>
<tr class="main"></tr>
<tr class="emails-details">
<button>some button</button>
</tr>
<tr class="main"></tr>
<tr class="emails-details">
<button>some button</button>
</tr>
I want to select the previous tr.main after clicking a button but cannot figure out how to get to the right previous elemetn using .prev(), .prevAll(), or .prevUntil()
$(function() {
$('.dropdown-image').click(function() {
$(this).parent().parent().parent().prev($("tr:nth-of-type(1)")).children().css('border-bottom-color', '#a3d0dd');
$(this).parent().parent().parent().prevUntil('.main').children().css('border-bottom-color', '#a3d0dd');
});
});
Iv got the first row sorted because it doesnt have a row of tr.emails-detials after it but i need to change the border-bottom-color of the row above, as seen below the blue border is missing from the selected row.

Well i solved my problem using
$(this).parent().parent().parent().prev('tr').prev('.main').children().css('border-bottom-color', '#a3d0dd');
i know someone will comment about the .parent().parent() and .prev().prev() etc but problem solved for now.

Can you use CSS to reference a parent or child of a certain object?

I guess I am spoiled with JavaScript. If you want to change something about the parent, you can code something like parentNode.style.etc.
<TABLE id="hasID">
<TBODY>
<TR>
<TD>
<IMG id="hasID2" src="somePicture.png">
<IMG id="hasID3" src="someOtherPicture.png">
</TD>
</tr>
<tr>
<td>other stuff</td>
</tr>
</tbody>
</table>
As you can see from my code table has an id, and the img tags have ids. What I would like to do is add a stype class to the first TD, so that all the images are aligned to the left or middle, that kind of thing.
However, here is a tricky part, I don't want to user JavaScript, because it looks to slow. Everything starts out on the right, and then jump to the center, after everything is loaded.
Also, here is a second tricky part. I can't change add a class to the TD, because it generated by JSF.
So my main question is can I do this with CSS.
UPDATE:
I don't really need to reference a parent. Referencing a child will also work for me.

You can't select a parent via CSS. It was proposed as a feature but it's not even close to implementation.
I will suggest that you move any javascript you have to just after the content above, which means that it will run as soon as that part of the section is rendered, thus removing any delay.
<TABLE id="hasID">
<TBODY>
<TR>
<TD>
<IMG id="hasID2" src="somePicture.png">
<IMG id="hasID3" src="someOtherPicture.png">
</TD>
</tr>
<tr>
<td>other stuff</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var img = document.getElementById("hasID2");
img.parentNode.style.textAlign = "right";
</script>
Inline Javascript is OK to use in these scenarios.

Sorry no way to select parent in css.
Is there a CSS parent selector?

Not sure if this will help, but I'll mention that you can add classes using JSF with styleClass="", depending on how you are generating the table. There is also a columnClass="" if you are putting these in a datatable.