We Keep Coding

Problem adding classes to DOM elements on click in IE11 and Edge

So I'm working on this project currently in ASP.NET MVC, and silly me have been making it and only testing it towards Chrome (Which happens to be my default browser).
There was a lot of "imperfections" once i published it to my test server, but most of those have been sorted.
I got a problem now with a button panel that expands to show some information. It works great in Chrome, and the strange thing is it works sometimes on some elements in IE11 and Edge. Also there is a difference in the look:
IE11 & Edge
Chrome
Chrome open
As you can see in the IE & Edge picture it already shows the scroll bar before the div that holds that one is shown. The second picture is how i want it to look in IE/Edge prior to click and the third picture is what it should look like after. As i said it's working in chrome.
// The javascript to trigger the on click:
$("body").on('DOMSubtreeModified', function () {
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
});
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
}
/* Add a background color to the button if it is clicked on (add the .active
class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
background-color: #ccc;
}
/* Style the accordion panel. Note: hidden by default */
.panel {
padding: 0 0px;
background-color: white;
max-height: 0;
overflow: scroll;
transition: max-height 0.2s ease-out;
-webkit-transition: max-height 0.2s ease-out;
-moz-transition: max-height 0.2s ease-out;
-o-transition: max-height 0.2s ease-out;
overflow-y: hidden
}
.accordion:after {
content: '\02795'; /* Unicode character for "plus" sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
margin-top: 7px;
}
.active:after {
content: "\2796"; /* Unicode character for "minus" sign (-) */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-12 col-lg-12" id="noPadding">
<button class="accordion defaultSubtextHeader"><b>Show data</b></button>
<div id="log_data" class="panel lightGreyBackground">
<div class="col-md-12 col-lg-12" id="flowbenchTestBox">
<table border="1">
<tr>
<th class="thCenterText">Interneal Number</th>
<th class="thCenterText">Created</th>
<th class="thCenterText">Changed</th>
<th class="thCenterText">Minimum Battery Level</th>
</tr>
#if (sigfoxData != null)
{
<tr>
<td align="center" id="minorTextPadding">#sigfoxData.InternalNumber</td>
<td align="center" id="minorTextPadding">#sigfoxData.Created</td>
<td align="center" id="minorTextPadding">#sigfoxData.Changed</td>
<td align="center" id="minorTextPadding">#sigfoxData.MinimumBatteryLevel</td>
</tr>
}
</table>
</div>
<div class="col-lg-12" style="height:15px;"></div>
</div>
</div>
The css is something i found online, and i would link to the original if i could remember it but i cant.
Any idea about why it is behaving like it is? Tried adding IE11 browser fix to App_Browsers, and that sorted the other "beauty" issues.
Hope someone here can help me out. I have tried the things i could find, but nothing so far seems to be working. And this part is an issue both when running locally and on the server. The server is running .net 4.0, and i wont be able to upgrade it at this point in time.
Thanks.
Edit: Just wanted to point out that i have something between 4-6 of these on a page, and maybe 1-2 works out of them? So it might be something with the javascript being loaded before all elements have been rendered since they are staggered because they are loaded from a sql server.
Edit2: Just adding the full partial view as per comment - and dont want to mess up the runnable code example.
#{
var sigfoxData = ViewBag.Sigfox;
}
<h1 class="defaultHeaderFont">Sigfox</h1>
#if (sigfoxData != null)
{
<div class="col-md-12 col-lg-12" id="noPadding">
<button class="accordion defaultSubtextHeader"><b>Show data</b>
</button>
<div id="log_data" class="panel lightGreyBackground">
<div class="col-md-12 col-lg-12" id="flowbenchTestBox">
<table border="1">
<tr>
<th class="thCenterText">Interneal Number</th>
<th class="thCenterText">Created</th>
<th class="thCenterText">Changed</th>
<th class="thCenterText">Minimum BatteryLevel</th>
</tr>
#if (sigfoxData != null)
{
<tr>
<td align="center" id="minorTextPadding">
#sigfoxData.InternalNumber
</td>
<td align="center" id="minorTextPadding">
#sigfoxData.Created
</td>
<td align="center" id="minorTextPadding">
#sigfoxData.Changed
</td>
<td align="center" id="minorTextPadding">
#sigfoxData.MinimumBatteryLevel
</td>
</tr>
}
</table>
</div>
<div class="col-lg-12" style="height:15px;"></div>
</div>
</div>
}
else
{
#Html.Partial("_EmptyTestView")
}

As implied by your JavaScript, additional HTML will be loaded dynamically. In this case you should use JQuery's event delegation .on('event', 'selector', handlerFunc) on an ancestor element rather than observing the DOM.
Furthermore it is alway a good idea to use the DOMContentLoaded event, i.e. the JQuery shorthand $(function(){}).
Note also that you are using multiple identical IDs, however, the HTML specs say an ID has to be unique per document. I've changed that into class.
// The javascript to trigger the on click:
$(function()
{
$('body').on('click', 'button.accordion', function () {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight)
{
panel.style.maxHeight = null;
} else
{
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
});
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
}
/* Add a background color to the button if it is clicked on (add the .active
class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
background-color: #ccc;
}
/* Style the accordion panel. Note: hidden by default */
.panel {
padding: 0 0px;
background-color: white;
max-height: 0;
overflow: scroll;
transition: max-height 0.2s ease-out;
-webkit-transition: max-height 0.2s ease-out;
-moz-transition: max-height 0.2s ease-out;
-o-transition: max-height 0.2s ease-out;
overflow-y: hidden
}
.accordion:after {
content: '\02795'; /* Unicode character for "plus" sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
margin-top: 7px;
}
.active:after {
content: "\2796"; /* Unicode character for "minus" sign (-) */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-12 col-lg-12" id="noPadding">
<button class="accordion defaultSubtextHeader"><b>Show data</b></button>
<div id="log_data" class="panel lightGreyBackground">
<div class="col-md-12 col-lg-12" id="flowbenchTestBox">
<table border="1">
<tr>
<th class="thCenterText">Interneal Number</th>
<th class="thCenterText">Created</th>
<th class="thCenterText">Changed</th>
<th class="thCenterText">Minimum Battery Level</th>
</tr>
<tr>
<td align="center" class="minorTextPadding">Example InternalNumber</td>
<td align="center" class="minorTextPadding">Example Created</td>
<td align="center" class="minorTextPadding">Example Changed</td>
<td align="center" class="minorTextPadding">Example MinimumBatteryLevel</td>
</tr>
</table>
</div>
<div class="col-lg-12" style="height:15px;"></div>
</div>
</div>

CSS Animation underlaps bootstrap striped table rows

For some reason it seems that the darker rows are overlapping the white ones, so the animation (glow) can't 'pass-through' them.
See gif: https://i.imgur.com/YnAS3F4.gifv
I've recreated the same on snippet, however there it does not overlap. In this case the snippet would be what I want..
$(document).ready(function () {
$(".lblRetry").hover(function () {
var grId = this.attributes.value.value;
var grRow = document.getElementById(grId);
grRow.classList.add("testAnimation");
}, function () {
removeClass(this);
});
});
function removeClass(e) {
var grId = e.attributes.value.value;
var grRow = document.getElementById(grId);
setTimeout(function () {
grRow.classList.remove("testAnimation");
}, 4000);
};
.testAnimation {
-webkit-animation: frames linear 1s infinite alternate;
animation: frames linear 1s infinite alternate;
animation-iteration-count: 4;
}
#-webkit-keyframes frames {
0% {
outline: none;
border-color: #9ecaed;
box-shadow: 0px 0px 0px dodgerblue;
}
25% {
outline: none;
border-color: #9ecaed;
box-shadow: 0px 0px 10px dodgerblue;
}
50% {
outline: none;
border-color: #9ecaed;
box-shadow: 0px 0px 20px dodgerblue;
}
75% {
outline: none;
border-color: #9ecaed;
box-shadow: 0px 0px 25px dodgerblue;
}
100% {
outline: none;
border-color: #9ecaed;
box-shadow: 0px 0px 30px dodgerblue;
}
}
<div class="container-fluid">
<table class="table table-striped">
<thead>
<tr class="header">
<th class="sortableTableHeader" style="white-space:nowrap; width:8em;" data-fieldname="ExecutionDate"><span class="link">Executed</span></th>
<th class="sortableTableHeader" data-fieldname="Shippers" style="width:10em;white-space:nowrap;"><span class="link">Shipper</span></th>
<th class="sortableTableHeader" data-fieldname="Retry" style="width:2em;white-space:nowrap;"></th>
<th style="width:7em;">
Orders
<span class="glyphicon glyphicon-info-sign info" aria-hidden="true" data-html="true" data-toggle="tooltip" title="First number shows the amount of labels generated at first attempt. <br/> <br/> Numbers adding up to it in green means the amount of labels that have been created when a retry has been attempted. <br/><br/> Numbers in red mean the amount of un-created labels (still in error state). <br/><br/> Last number means the total amount of orders selected."></span>
</th>
<th style="width:14em;">Status</th>
</tr>
</thead>
<tbody>
<tr id="1">
<td>
Date
</td>
<td>
DHL
</td>
<td >
<span class="glyphicon glyphicon-repeat lblRetry" value="2" aria-hidden="true" data-html="true" data-toggle="tooltip" title="This label is a retry label. Originated from another group currently being highlighted."></span>
</td>
<td>
16
</td>
<td>
All good!
</td>
</tr>
<tr id="2">
<td>
Date
</td>
<td>
DHL
</td>
<td >
<span class="glyphicon glyphicon-repeat lblRetry" value="1" aria-hidden="true" data-html="true" data-toggle="tooltip" title="This label is a retry label. Originated from another group currently being highlighted."></span>
</td>
<td>
16
</td>
<td>
All good!
</td>
</tr>
</tbody>
</table>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Be more specific, like this:
.container-fluid table.table.table-striped.AdemTable .testAnimation {
-webkit-animation: frames linear 1s infinite alternate;
animation: frames linear 1s infinite alternate;
animation-iteration-count: 4;
}

How to get thead to the top on scrolling

I have problem creating sticky thead, my first 3 columns are fixed, rest of data is scrollable horizontal. I'm using jquery library for the sticky header, but position fixed is destroying my horizontal scroll, displaying all elements on the page.
I need sticky header to stay at the top, and at the same time horizontal scroll to work.
This is how it should look but with sticky header.
enter image description here
.horizontal-scroll-access-point {
display: block;
overflow-x: auto;
white-space: nowrap;
thead,tbody {
tr {
//First three elements are fixed
th,td {
&:nth-child(1), &:nth-child(2), &:nth-child(3){
background-color: white;
position:absolute;
text-align: center;
width: 100px;
padding-bottom: 10px;
z-index: 1;
}
&:nth-child(1) {
left: 0;
}
&:nth-child(2) {
left: 100px;
}
&:nth-child(3) {
left: 180px;
}
&:nth-child(4) {
padding-left: 300px;
}
}
}
}
}
<table class="table monthTable horizontal-scroll-access-point" ng-if="showActions()">
<thead class="sticky-header" sticky-divs sticky-divs-margin-top="50">
<tr>
<th class="heading" translate>SH_Area</th>
<th><span translate>AP_openClose</span></th>
<th translate>AP_maxUnits</th>
<th class="hour hover-cell" ng-repeat="hour in apu.hours" ng-click="changeUnitsAllByHourModal(hour)" on-finish-render>
<span ng-bind="hour | hourminute"></span>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="area in apu.areaHours">
<td ng-class="area.closed ? 'closed-cell' : 'hover-cell'" ng-click="changeUnitsAllByAccessPointModal(area)"><strong ng-bind="area.accessPointName"></strong></td>
<td class="open-close-cell">
<button type="button" class="btn btn-xs" ng-class="area.closed ? 'btn-danger' : 'btn-success'" ng-click="switchAreaStatus(area)" translate>{{ area.closed ? 'AP_closed' : 'AP_opened' }}</button>
</td>
<td class="gradient-cell-green" ng-bind="area.maxUnits">
</td>
<td ng-class="area.closed ? 'closed-cell' : 'hover-cell'" style="background-color: rgba(110, 170, 120, {{ hour.units / area.maUnits }})" ng-repeat="hour in area.hours" ng-click="changeUnitsModal(area, hour)">
<span ng-bind="area.closed ? '0' : hour.units"></span>
</td>
</tr>
</tbody>
</table>

You should only change the position of thead and then give each one of the th elements the same width as the width of the widest tr element in that column.
I assume your table is responsive. If so, write some js code to do so.

How to expand input field to the right in a header bar

I have a header bar with left-aligned items, center items and right-aligned items. In the center, I have multiple items and a search input field. When the search field gets focus, I'm making it wider by animating the width. Right now, because the items are centered, it's animating both left and right to center the content. How can I change this so it keeps the alignment and expands the width to the right?
I'm not using Bootstrap.
I'm currently using a table for the header bar content. I'm open to changing that, but if there's a way to do it with the current design, that would be preferred.
Here's a JSFiddle...click in the search field to see what's happening: https://jsfiddle.net/L60g0j64/1/
EDIT: I've updated it with the suggested solution below. My only issue is that the red container surrounding the input should expand also.
HTML/CSS/JS Snippet
$('#search').focus(function() {
$(this).val("");
$('#hidden_content').css('display','inline');
$(this).animate({width: '180px'}, 200);
});
$('#search').blur(function() {
$(this).val('Search');
$('#hidden_content').css('display','none');
$(this).animate({width: '120px'}, 200);
});
.header-navbar {
cursor: pointer;
white-space: nowrap;
background-color: #1f2127;
color: #cbcbcb;
min-width: 0;
text-overflow: ellipsis;
z-index: 299;
top: 0px;
left: 0px;
width: 100%;
height: 32px;
float: none;
position: fixed;
border-spacing: 0px;
}
td.cell-center {
text-align: center;
}
.cell-center table {
margin: 0 auto;
}
.header-table {
height: 32px;
border: none;
border-spacing: 0px;
}
td.header_rtd {
padding-right:12px;
}
td.header_ltd {
padding-left:12px;
}
.search-wrapper {
max-width: 124px;
background-color: red;
padding:4px;
}
.hidden_content{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="header-navbar" id="header" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<table class="header-table" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class='header_rtd'>left1</td>
<td class='header_rtd'>left2</td>
</tr>
</table>
</td>
<td width=100% class='cell-center'>
<table class="header-table" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class='header_rtd'>center</td>
<td class='header_rtd'>center</td>
<td><div class="search-wrapper">
<input class="search" id="search" style="width: 120px;" type="text" size="60" value="Search"/>
<div class='hidden_content' id='hidden_content'>
hidden content
</div>
</div></td>
</tr>
</tbody>
</table>
</td>
<td>
<table class="header-table" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class='header_ltd'>right1</td>
<td class='header_ltd'>right2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

One quick solution would be to give the parent element a max-width equal to the initial width of the element. In doing so, the element will still be centered relative to the initial width because the input element's animated width will not effect the width of the parent element.
Updated Example
.search-wrapper {
max-width: 124px;
}
As a side note, you don't need jQuery/JS to animate the width, you can simply use a CSS transition along with the :focus pseudo-class.
Updated Example
.search-wrapper input.search {
transition: 1s width ease;
width: 120px;
}
.search-wrapper input.search:focus {
width: 180px;
}

CSS table: How to position action buttons left to each row

I've this default responsive Bootstrap table:
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
How can I add a div or container to the right of each row showing some action buttons, like delete row, updating icon etc.? They should be hidden by default. When I mouse over a row, it should be displayed right to the row. Not inside the table, but the top and bottom should be aligned with the position and height of the given table row.
How can I solve this? If it cannot be done using CSS alone, a solution using jQuery/JavaScript or like could be okay.

Try the following code
$('tbody tr').hover(function(){
$(this).find('td:last').show();
},function(){
$(this).find('td:last').hide();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.table-bordered-custom{
border:0px;
border-top:initial;
}
.table-bordered-custom thead th {
border-top:1px solid #ddd !important;
}
.table-bordered-custom tbody td:last-child {
border:0 !important;
display:none;
}
</style>
<table style="margin:10px" class="table table-bordered table-bordered-custom">
<thead>
<tr>
<th width="10%">#</th>
<th width="25%">First Name</th>
<th width="25%">Last Name</th>
<th width="25%">Username</th>
<th style="border:0 !important" ></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
<td ><input type="button" value="X"> <input type="button" value="Edit"></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
<td ><input type="button" value="X"> <input type="button" value="Edit"></td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
<td ><input type="button" value="X"> <input type="button" value="Edit"></td>
</tr>
</tbody>
</table>

you may use hover and absolute to allow also tab crawling from a link to another :
td,th {
border:1px solid;
}
table {
margin:1em;
}
tr> :last-child {
width:1em;
vertical-align:top;
border:none;
}
:last-child a {
text-align:center;
position:absolute;
left:-9999px;
display:inline-block;
width:1em;
color:white;
text-decoration:none;
background:red;
}
tr:hover td:last-child a,td a:focus {
left:auto;
}
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
<td><a href>X</a></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
<td><a href>X</a></td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
<td><a href>X</a></td>
</tr>
</tbody>
</table>
</div>

Since you need complete width for the table and it should be responsive, you can keep the delete button inside last td(Username) and position it by getting few values from the hovered row using jQuery.
$('.table-bordered-custom tr')
.on('mouseenter', function () {
var offset = $(this).offset();
var top = offset.top;
var width = parseInt($('.table-responsive').css('width'),10);
var elem = $(this).find('span.delete');
var parent_padding_left = parseInt($('.table-responsive').parent().css('padding-left'),10)
elem.css({
"top": top + "px",
"left": (width + parent_padding_left) - 1 + "px",
"display": "inline"
});
})
.on('mouseleave', function () {
$('span.delete').css({
"display": "none"
})
});
span.delete {
display: none;
position: absolute;
background: crimson;
color: #fff;
cursor: pointer;
padding: 9px 12px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<section id="content">
<div class="col-xs-8 col-xs-offset-2">
<div class="table-responsive">
<table class="table table-bordered table-bordered-custom">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo<span class="delete">x</span>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat<span class="delete">x</span>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter<span class="delete">x</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</div>

imho so many difficult answers, I would do it with an easy aproach.
In this JSFIDDLE I just add a display:none cell to each row with whatever buttom you want to show inside and with no borders so it won't look at all as inside the table, then :
tr:hover .buttom {display:table-cell;}
may do the trick.
and no idea why I have the feeling this may not be what you want (bounty question so many javascript answers and such)... but as much as I reread the question this is it.
Excuse my poor english
Edited: Btw, if you really want the buttoms outside the "responsive" table so you have your border around, it's easily done with absolute positioned, but you shoudn't really do it. Once the table goes 100% of the window width, then those buttoms you want won't be visible for the user.
Edited: When the "buttom" cell is displayed as none, it won't take the fixed 40px width we need (or whatever future width you need once you have all buttoms inside) so I set the width to .X0 insteed becuase this element is there (but with no border, style or content) and will make all the column the same width.
Then I just overwrite some bootstrap styles that were messing with the table. (Please notice that something like:
.table-responsive {border:0; padding:2px;}
.table-bordered {border:0;}
may affect all your project so be sure you just overwrite the styles in this table and non others. Use something like:
.container-of-the-table-with-buttoms .table-responsive {border:0; padding:2px;}
Fiddle has been updated

I quickly wrote some code that might help you get started :
HTML
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="actionbuttons"></div>
CSS
.actionbuttons
{
position:absolute;
width: 150px;
height: 30px;
background: #f00;
display:none;
}
jQuery code
$('tbody tr').on('mouseover',function(){
var rowPosition = $(this).position();
var targetPosition = {
top: rowPosition.top,
left: rowPosition.left + $(this).width()
}
$('.actionbuttons').css(targetPosition);
$('.actionbuttons').show();
});
$('tr').on('mouseout',function(){
$('.actionbuttons').hide();
});
The fiddle

try adding an onmouseover and an onmouseout attribute to each row of the table. Use each to make the button visible and invisible.
<tr onmouseover="
*insert code to make button for this row visible*
" onmouseout="
*insert code to make button for this row invisible*
">
*insert table data for this row*
</tr>

Use this:
$('tr').hover(function(){
$('div').removeClass('hide');
$('div').addClass('open');
})
CSS:
.open {
background: yellow;
height: 300px;
position: absolute;
top: 0;
left: -500px;
width: 500px;
opacity: 1;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
-ms-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
.close {
background: yellow;
height: 300px;
position: absolute;
top: 0;
left: -500px;
width: 500px;
opacity: 1;
-webkit-transition: all 0.7s ease-in;
-moz-transition: all 0.7s ease-in;
-ms-transition: all 0.7s ease-in;
-o-transition: all 0.7s ease-in;
transition: all 0.7s ease-in;
}
Hope it Works!

You can also play a little with CSS3 transform, transition and eventually FontAwesome to obtain a:
Pure CSS3 solution ( NO JavaScript, NO images )
td {
background: white;
}
th.buttons {
display: none;
}
td.buttons {
border: none !important;
padding: 0px !important;
z-index: -1;
transform: translateX(-100%);
transition: transform .5s ease 0s, z-index .1s ease 0s;
}
tr:hover td.buttons {
transform: translateX(0%);
z-index: 1;
transition: transform .5s ease 0s, z-index .01s ease .5s;
}
.buttons ul {
text-align: left;
margin: 0;
padding: 0;
}
.buttons ul li {
display: inline-block;
min-height: 100%;
text-align: center;
}
.buttons a {
border-radius: 2px;
color: red;
display: block;
font-size: 16px;
line-height: 100%;
min-width: 5em;
text-decoration: none !important;
transition: background 0.3s ease 0s;
}
.buttons i {
display: block;
font-size: 1.5em;
}
.buttons span {
font-family: sans-serif;
font-size: 0.625em;
text-transform: uppercase;
}
li:hover a {
background: red;
color: white;
z-index: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<th class="buttons"></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
<td class="buttons">
<ul>
<li><i class="fa fa-pencil-square-o"></i><span>update</span>
</li><!--
--><li><i class="fa fa-times"></i><span>delete</span>
</li>
</ul>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
<td class="buttons">
<ul>
<li><i class="fa fa-pencil-square-o"></i><span>update</span>
</li><!--
--><li><i class="fa fa-times"></i><span>delete</span>
</li>
</ul>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
<td class="buttons">
<ul>
<li><i class="fa fa-pencil-square-o"></i><span>update</span>
</li><!--
--><li><i class="fa fa-times"></i><span>delete</span>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
Note: the <li> are connected by HTML comments (<!-- -->) to prevent the inline-block spacing problem.