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.
Related
I am using feather icons, and i would want the feather trash to appear beside the item name when my mouse hovers it.
I see this persons asking the question on Stacks but no answer was found.
Icons Only Appearing When Hover
My code below:
<div class="container-fluid">
<div class="table-responsive">
<table class="table table-striped table-sm table-hover">
<thead>
<tr>
<th class=" text-center">Item#</th>
<th class=" text-center">Item Name</th>
<th class=" text-center">Qty</th>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>Apple</td>
<td class=" text-right">5</td>
</tr>
<tr>
<td>1,002</td>
<td>Kidney Beans</td>
<td class=" text-right">3</td>
</tr>
The principle:
tr .fa { /* row not hovered */
opacity: 0;
transition: opacity .2s ease-out; /* adding transition, improved UI */
cursor: pointer; /* change cursor when hovering icon */
transition-delay: .5s; /* delay the icon fading out */
}
tr:hover .fa { /* row hovered */
opacity: 1;
transition-delay: 0s; /* cancel delay when entering */
}
In its simplest form:
tr .fa {
opacity: 0;
}
tr:hover .fa {
opacity: 1;
}
Working example:
tr .fa {
margin-right: .5rem;
opacity: 0;
transition: opacity .2s ease-out;
cursor: pointer;
transition-delay: .5s;
}
tr:hover .fa {
opacity: 1;
transition-delay: 0s;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="table-responsive">
<table class="table table-striped table-sm table-hover">
<thead>
<tr>
<th class=" text-center">Item#</th>
<th class=" text-center">Item Name</th>
<th class=" text-center">Qty</th>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td><i class="fa fa-trash"></i>Apple</td>
<td class=" text-right">5</td>
</tr>
<tr>
<td>1,002</td>
<td><i class="fa fa-trash"></i>Kidney Beans</td>
<td class=" text-right">3</td>
</tr>
</tbody>
</table>
</div>
</div>
Feel free to change the selectors so that you don't affect anything else and that they match your current markup.
In your case, you'll want want to replace .fa selector with [data-feather].
Add a class to your icon element
Hide it by add this attribute style="display: none;"
Add the hover effect to your CSS file: .youriconclass:hover {display: block;}
jQuery hover method can help you accomplish the task. First, you need to add some HTML modifications like create a container for the icon. e.g.
<td class="trigger-icon">
Apple
<span class="icon-container"> </span>
</td>
Now for the js part,
$(".trigger-icon").hover(function(){
$(".icon-container").append('<i data-feather="trash"></i>');
}, function(){
$(".icon-container").empty();
});
For feather icon to work,
$(".trigger-icon").hover(function(){
$(".icon-container").append('<i data-feather="trash"></i>');
feather.replace();
}, function(){
$(".icon-container").empty();
});
I want two tables side-by-side that...
Share the same vertical scroll
Have separate horizontal scrolls
Have sticky headers
...all within a container of flexible width and height.
Here is a codepen of my attempt: https://codepen.io/numberjak/pen/gOYGEKz
As you can see I have ticked all my requirements except for both tables having sticky headers.
<div class="container">
<div class="scroll red">
<table>
<thead>
<tr>
<th>Scroll 1</th>
<th>Scroll 2</th>
<th>Scroll 3</th>
<th>Scroll 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
<div class="scroll blue">
<table>
<thead>
<tr>
<th>Scroll 1</th>
<th>Scroll 2</th>
<th>Scroll 3</th>
<th>Scroll 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
</div>
html {
height: 100%;
background-color: black;
}
div {
display: flex;
}
.container {
overflow: auto;
align-items: flex-start;
max-height: 20rem;
}
thead th {
position: sticky;
top: 0;
background-color: grey;
}
td, th {
min-width: 30rem;
padding: 1rem;
background-color: white;
}
tr {
height: 10rem;
}
.scroll {
overflow: auto;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
Header and the body of the table are still connected, they will still have the same scroll properties. Now to let them not 'work' as a table anymore you can set the display: block. This way and are separated.
You can add this to your css
table tbody, table thead
{
display: block;
}
table tbody
{
overflow: auto;
height: 100px;
}
The scroll issue can be fixed with some javascript!
$(".red tbody").scroll(function() {
$(".blue tbody").scrollTop($(".red tbody").scrollTop());
});
$(".blue tbody").scroll(function() {
$(".red tbody").scrollTop($(".blue tbody").scrollTop() );
});
so the final product look like this
$(".red tbody").scroll(function() {
$(".blue tbody").scrollTop($(".red tbody").scrollTop());
});
$(".blue tbody").scroll(function() {
$(".red tbody").scrollTop($(".blue tbody").scrollTop() );
});
html {
height: 100%;
background-color: black;
}
div {
display: flex;
}
.container {
overflow: auto;
align-items: flex-start;
max-height: 20rem;
}
thead th {
position: sticky;
top: 0;
background-color: grey;
}
td, th {
min-width: 30rem;
padding: 1rem;
background-color: white;
}
tr {
height: 10rem;
}
.scroll {
overflow: auto;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
table tbody, table thead
{
display: block;
}
table tbody
{
overflow: auto;
height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="scroll red">
<table>
<thead>
<tr>
<th>Scroll 1</th>
<th>Scroll 2</th>
<th>Scroll 3</th>
<th>Scroll 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
<div class="scroll blue">
<table>
<thead>
<tr>
<th>Scroll 1</th>
<th>Scroll 2</th>
<th>Scroll 3</th>
<th>Scroll 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
</div>
I am having a table which is having + and - items for expand and collapse. Onclick of this icons row next to that particular row should expand . I am adding collpasible Icon dynamically through jquery. How can I access next rows dynamically on click of these icons.
Ideally on click of that - icon that expanded row should hide and onclick of + it should be shown.. Thanks in advance
$( document ).ready(function() {
$(".table tbody tr.has-history td:first-child").append('<span class="collapse-icon"></span>');
});
.table tbody tr.has-history > td:first-child {
position: relative;
}
.table tbody tr.has-history span.collapse-icon {
display: inline-block;
width: 20px;
height: 20px;
color: white;
text-align: center;
font-weight: bold;
position: absolute;
left: -20px;
background: #f09d18;
border-radius: 5px 0 0 5px;
cursor: pointer;
font-size: 1.5em;
line-height: 1em;
}
.table tbody tr.has-history span.collapse-icon:before {
content: "+";
}
.table tbody tr.has-history.open span.collapse-icon {
background: #eee;
color: #000;
border: 1px solid #ccc;
}
.table tbody tr.has-history.open span.collapse-icon:before {
content: "-";
}
.table{
MARGIN-LEFT:40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table">
<thead>
<tr>
<th>Product</th>
<th>Config</th>
<th>Version</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class="has-history open">
<td>MSM8992</td>
<td>Estel</td>
<td>2</td>
<td>Active</td>
</tr>
<tr class="expanded">
<td colspan="4">
<table class="table" >
<thead>
<tr>
<th>Product</th>
<th>Config</th>
<th>Version</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>MSM8994</td>
<td>Elessar</td>
<td>1</td>
<td>Active</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>MSM8994</td>
<td>Elessar</td>
<td>1</td>
<td>Active</td>
</tr>
<tr>
<td>APQ8084</td>
<td>Gandalf - PoP Memory</td>
<td>1</td>
<td>Active</td>
</tr>
<tr class="has-history">
<td>MDM9x40</td>
<td>Tesla</td>
<td>3</td>
<td>Active</td>
</tr>
<tr>
<td>MDM9x45</td>
<td>Spark</td>
<td>1</td>
<td>Active</td>
</tr>
<tr class="has-history">
<td>APQ8084</td>
<td>Gandalf - External Memory</td>
<td>1</td>
<td>Active</td>
</tr>
</tbody>
</table>
Bind click event on collapse-icon class
Toggle next row and icon on click
$(document).on("click", ".collapse-icon", function() {
$(this).parents(".has-history").next().slideToggle();
$(this).parents(".has-history").toggleClass("open");
});
Refer this JSFiddle https://jsfiddle.net/k6kn972b/
Bind click event using event delegation
Then target the current row using $(this).closest("tr")
Then get the next row using .next()
$(document).on("click", ".collapse-icon", function() {
$(this).closest("tr").next().slideToggle();
});
In my table I have a some values in a column that span over multiple rows. When I hover over this value only one row is hilighted (the row containing the actual value). My question is, is there anyway to hilight the other rows when hovering on the value that spans over them ?
here is a code example :
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:hover{background-color:#f5f5f5}
<h2>Hoverable Table</h2>
<p>Move the mouse over the table rows to see the effect.</p>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td rowspan="2">$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td rowspan="2">$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
</tr>
</table>
If your question is about when hovering $100, both Peter and Lois rows should get highlighted then you cannot do it with css alone as per my understanding. You are suppose to go for js scripts.
Check below snippet for reference. Hover on td with rowspan. Hope this helps.
$('.hasRowSpan').hover(function(){
$(this).closest('tr').toggleClass('bg-red');
$(this).closest('tr').next('tr').toggleClass('bg-red');
});
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:hover{background-color:red}
.bg-red{
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td class="hasRowSpan" rowspan="2">$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td class="hasRowSpan" rowspan="2">$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
</tr>
</table>
Update: You can use nextAll() when rowspan has more than 2 rows.
Find below updated snippet as per your comment.
$('tr').hover(function() {
if ($(this).find('td').hasClass('hasRowSpan')) {
$(this).next('tr').toggleClass('bg-red');
}
if ($(this).prev('tr').find('td').hasClass('hasRowSpan')) {
$(this).prev('tr').toggleClass('bg-red');
}
});
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:hover {
background-color: red
}
.bg-red {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td class="hasRowSpan" rowspan="2">$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
<tr>
<td>David</td>
<td>Rijo</td>
<td>$500</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td class="hasRowSpan" rowspan="2">$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
</tr>
</table>
Update 1: I just updated the script as per your comment here. Note: Am sure this won't be working if you have rowspan more than 2.
$('.hasRowSpan').hover(function() {
$(this).closest('tr').toggleClass('bg-red');
$(this).closest('tr').next('tr').toggleClass('bg-red');
});
$('tr').hover(function() {
if ($(this).prev('tr').find('td').hasClass('hasRowSpan')) {
$(this).prev('tr').find('td.hasRowSpan').toggleClass('bg-red');
}
});
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:hover {
background-color: red
}
.bg-red {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td class="hasRowSpan" rowspan="2">$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
<tr>
<td>David</td>
<td>Rijo</td>
<td>$500</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td class="hasRowSpan" rowspan="2">$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
</tr>
</table>
Update 2: Check above snippet, I have changed my code as per your desired output.
I am trying to add cells (selected user wish) form of a record from user list to final list table when user clicks on GET RECORD Button Type Of Div.
How can I approach this functionality?
$(document).ready(function() {
$('#table-txt td').mouseover(function() {
$(this).addClass('td-bg');
});
$('#table-txt td').mouseout(function() {
$('td').removeClass('td-bg');
});
$('#table-txt td').click(function() {
$('#table-txt td').removeClass('td-bg');
$(this).toggleClass('active');
});
$('#getrow').click(function() {
getrecord();
});
});
function getrecord() {
alert('How to get that Record to second table');
}
table,
tr,
th,
td {
border: 1px solid #dddddd;
border-collapse: collapse;
}
.td-bg {
background: #006597;
color: #fff;
opacity: 0.7;
cursor: pointer;
}
.block-header {
background: #006597;
color: #fff;
}
.block-header th {
text-align: center;
}
.active {
background: #006597;
color: #fff;
}
.addrow {
width: 10%;
height: 125px;
background: #006597;
float: left;
text-align: center;
color: #fff;
line-height: 100px;
cursor: pointer;
word-wrap: break-word;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:45%; float:left;" id="table-txt">
<tr class="block-header">
<th colspan="4">User List</th>
</tr>
<tr height="25" class="block-header">
<th width="25%">Name</th>
<th width="25%">Age</th>
<th width="25%">Gender</th>
<th width="25%">Salary</th>
</tr>
<tr height="25">
<td>Samudrala</td>
<td>50</td>
<td>M</td>
<td>XYZ</td>
</tr>
<tr height="25">
<td>Samudrala</td>
<td>50</td>
<td>M</td>
<td>XYZ</td>
</tr>
<tr height="25">
<td>Samudrala</td>
<td>50</td>
<td>M</td>
<td>XYZ</td>
</tr>
</table>
<div class="addrow" id="getrow">GET RECORD</div>
<table style="width:45%; float:right;">
<tr class="block-header">
<th colspan="4">Final List</th>
</tr>
<tr height="25" class="block-header">
<th width="25%">Name</th>
<th width="25%">Age</th>
<th width="25%">Gender</th>
<th width="25%">Salary</th>
</tr>
<tr height="25">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr height="25">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr height="25">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
You can use cellIndex and parentNode.rowIndex to trigger the positions and store the selected values in an array using map() function.
Check this snippet:
$(document).ready(function() {
$('#table-txt td').click(function() {
$(this).addClass('td-bg');
var arr = $(this).map(function() {
return $(this).text();
}).get();
$(this).each(function() {
var rI = this.cellIndex;
var cI = this.parentNode.rowIndex;
var sel = $('#table-right tr:eq(' + cI + ') td:eq(' + rI + ')');
$('#getrow').click(function() {
$('td').removeClass('td-bg');
sel.html(arr);
});
});
});
});
table,
tr,
th,
td {
border: 1px solid #dddddd;
border-collapse: collapse;
}
.td-bg {
background: #006597;
color: #fff;
opacity: 0.7;
cursor: pointer;
}
.block-header {
background: #006597;
color: #fff;
}
.block-header th {
text-align: center;
}
.active {
background: #006597;
color: #fff;
}
.addrow {
width: 10%;
height: 125px;
background: #006597;
float: left;
text-align: center;
color: #fff;
line-height: 100px;
cursor: pointer;
word-wrap: break-word;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:45%; float:left;" id="table-txt">
<tr class="block-header">
<th colspan="4">User List</th>
</tr>
<tr height="25" class="block-header">
<th width="25%">Name</th>
<th width="25%">Age</th>
<th width="25%">Gender</th>
<th width="25%">Salary</th>
</tr>
<tr height="25">
<td>Samudrala</td>
<td>50</td>
<td>M</td>
<td>XYZ</td>
</tr>
<tr height="25">
<td>Samudrala</td>
<td>51</td>
<td>F</td>
<td>PQR</td>
</tr>
<tr height="25">
<td>Samudrala</td>
<td>52</td>
<td>M</td>
<td>ABC</td>
</tr>
</table>
<div class="addrow" id="getrow">GET RECORD</div>
<table style="width:45%; float:right;" id="table-right">
<tr class="block-header">
<th colspan="4">Final List</th>
</tr>
<tr height="25" class="block-header">
<th width="25%">Name</th>
<th width="25%">Age</th>
<th width="25%">Gender</th>
<th width="25%">Salary</th>
</tr>
<tr height="25">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr height="25">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr height="25">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
I have made some modifications to your code (Your table markup etc) and I think it has done what you want here is my final code:
$(document).ready(function(){
$('#table-txt td').mouseover(function(){
$(this).addClass('td-bg');
});
$('#table-txt td').mouseout(function(){
$('td').removeClass('td-bg');
});
$('#table-txt tr').click(function(){ //I modified this line
$('#table-txt tr td').removeClass('td-bg');//And this
$(this).toggleClass('active');
});
$('#getrow').click(function(){
getrecord();
});
});
function getrecord(){
var $trs = $('#table-txt tbody tr.active').clone(true);
$("#finalListTable tbody").append($trs);
}
table,
tr,
th,
td {
border: 1px solid #dddddd;
border-collapse: collapse;
}
.td-bg {
background: #006597;
color: #fff;
opacity: 0.7;
cursor: pointer;
}
.block-header {
background: #006597;
color: #fff;
}
.block-header th {
text-align: center;
}
.active {
background: #006597;
color: #fff;
}
.addrow {
width: 10%;
height: 125px;
background: #006597;
float: left;
text-align: center;
color: #fff;
line-height: 100px;
cursor: pointer;
word-wrap: break-word;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:45%; float:left;" id="table-txt">
<thead>
<tr class="block-header">
<th colspan="4">User List</th>
</tr>
<tr height="25" class="block-header">
<th width="25%">Name</th>
<th width="25%">Age</th>
<th width="25%">Gender</th>
<th width="25%">Salary</th>
</tr>
</thead>
<tbody>
<tr height="25">
<td>Samudrala</td>
<td>50</td>
<td>M</td>
<td>XYZ</td>
</tr>
<tr height="25">
<td>Samudrala</td>
<td>50</td>
<td>M</td>
<td>XYZ</td>
</tr>
<tr height="25">
<td>Samudrala</td>
<td>50</td>
<td>M</td>
<td>XYZ</td>
</tr>
</tbody>
</table>
<div class="addrow" id="getrow">GET RECORD</div>
<table id="finalListTable" style="width:45%; float:right;">
<thead>
<tr class="block-header">
<th colspan="4">Final List</th>
</tr>
<tr>
<th width="25%">Name</th>
<th width="25%">Age</th>
<th width="25%">Gender</th>
<th width="25%">Salary</th>
</tr>
</thead>
<tbody>
</tbody>
</table>