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.

JavaScript - Get data of first cell of selected table row

<table border="1" cellpadding="5" id="newtable">
<tr>
<th>Room No</th>
<th>AC</th>
<th>Deluxe</th>
<th>Tariff</th>
</tr>
<c:forEach var="room" items="${myrooms}">
<tr bgcolor="#4B476F" onMouseOver="this.bgColor='gold';" onMouseOut="this.bgColor='#4B476F';">
<td class="nr"><c:out value="${room.roomno}" /></td>
<td><c:out value="${room.ac}" /></td>
<td><c:out value="${room.deluxe}" /></td>
<td>₹<c:out value="${room.price}" /></td>
<td><button type="button" class="mybutton" onclick="rowFunction()">Pay</button> </td>
</tr>
</c:forEach>
</table>
On clicking the button corresponding to every row, I want my script to return the Room number i.e. the first cell data of the row. I have tried a lot of things after referring various articles on the Internet. Nothing seems to work. Please help.

You can use something like
Demo
$(window).on('click', '.mybutton' ,function() {
alert($(this).parent().parent().find('.nr').text());
//Or you can use, which is even better
//alert($(this).parent().siblings('.nr').text());
});
Here, the selector is pretty simple, we are first binding click event on the button, and onclick we select the button element parent i.e td and we select the parent of td i.e tr and later we find an element with a class of .nr
You can also write td.nr instead of just .nr to be more specific.
Your rows are being dynamically added, in order for your click listener to work you will have to delegate the events
Credits to #Patsy Issa for suggesting .siblings()

$(".mybutton").click(function(){
alert($(this).parent().siblings().eq(0).text());
});

usually im using DataTables js for solution, you can check at: https://datatables.net/reference/api/row().data()

javascript: Displayed hidden text proper width

I am trying to show hidden content in a tbody with some javascript.
Two problems.
First, I can't get my jsfiddle to work.
The script is working on my server...but it won't work with jsfiddle. I must be doing something stupid but cannot see what.
After solving that the real problem is when it shows the content, it is not displaying it in the same width ie 100% but just length of text. Would appreciate any suggestions about what is wrong here.
http://jsfiddle.net/eSPu7/3/
same code as in fiddle:
html
<table>
<tbody>
<tr style="background-color:blue;width:100%;height:30px;">
<td>This is always here no matter what</td>
</tr>
<tr style="background-color:blue;width:100%;height:30px;">
<td>
Show More
</td>
</tr>
</tbody>
<tbody id="more" style="display:none;">
<tr style="background-color:blue;width:100%;height:30px;">
<td>This is hidden</td>
</tr>
</tbody>
</table>
js:
function showMore() {
alert("hi");
document.getElementById("more").style.display="block";
}
UPDATE:
I updated it so fiddle now works and better illustrates the problem with blue background. The displayed hidden text is not the same width as the other rows in the table.

If you don't really need 2 tbody sections, take a look at this fiddle

Deleting Row of Table based on div id using JavaScript

Really need your help.
I have a table that can dynamically add and delete row. But the problem is I want to delete the row of the table based on div id. I mean, on one column for every row of table i have div id which are auto increment. Then, I want to delete the row based on the div id. Is that possible?
Thanks a lot.

You can do this really easy with jQuery.
http://jsfiddle.net/KWPWr/1/
$('#d2').closest('tr').remove();

Yes.
$('#row-id').closest('tr').fadeOut(200, function() { $(this).remove(); });
The above will first select the div, then find the table row it exists in, fades it out and the removes it.

If your table looks like this:
<table>
<tbody>
<tr>
<td>
<div id="01"></div>
</td>
</tr>
<tr>
<td>
<div id="02"></div>
</td>
</tr>
</tbody>
</table>
You can use document.getElementById(DIVID).parentNode.parentNode to access the <tr> Element.