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.
Related
I would like to create a responsive HTML table that wraps columns below itself if the width of the table overflows the container. It should look like this:
And when it's wrapped it schould look like this:
What is the optimal solution to this problem and can it be solved without using javascript?
The table in the default appearance is here:
table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
table th,
table td {
border-top: 1px solid #edf2f9;
border-bottom: 1px solid #edf2f9;
padding: 10px;
text-align: left;
}
table th {
background: #f9fbfd;
font-size: 10pt;
text-transform: uppercase;
font-weight: 400;
}
<table>
<thead>
<tr>
<th>First column</th>
<th>Second column</th>
<th>Third column</th>
<th>Fourth column</th>
</tr>
</thead>
<tbody>
<tr>
<td>First column data 1</td>
<td>Second column data 1</td>
<td>Third column data 1</td>
<td>Fourth column data 1</td>
</tr>
<tr>
<td>First column data 2</td>
<td>Second column data 2</td>
<td>Third column data 2</td>
<td>Fourth column data 2</td>
</tr>
<tr>
<td>First column data 3</td>
<td>Second column data 3</td>
<td>Third column data 3</td>
<td>Fourth column data 3</td>
</tr>
</tbody>
</table>
Without scripting, there is only one way out - media queries and set the "display: flex" and "flex-direction: column" properties for the table rows.
table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
table th,
table td {
border-top: 1px solid #edf2f9;
border-bottom: 1px solid #edf2f9;
padding: 10px;
text-align: left;
}
table th {
background: #f9fbfd;
font-size: 10pt;
text-transform: uppercase;
font-weight: 400;
}
#media (max-width: 800px) {
tr {
display: flex;
flex-flow: column nowrap;
}
}
<table>
<thead>
<tr>
<th>First column</th>
<th>Second column</th>
<th>Third column</th>
<th>Fourth column</th>
</tr>
</thead>
<tbody>
<tr>
<td>First column data 1</td>
<td>Second column data 1</td>
<td>Third column data 1</td>
<td>Fourth column data 1</td>
</tr>
<tr>
<td>First column data 2</td>
<td>Second column data 2</td>
<td>Third column data 2</td>
<td>Fourth column data 2</td>
</tr>
<tr>
<td>First column data 3</td>
<td>Second column data 3</td>
<td>Third column data 3</td>
<td>Fourth column data 3</td>
</tr>
</tbody>
</table>
This method is not 100% correct and does not completely solve the issue, but there are no other options yet.
I'm following this Table Row and Column Highlighting method with the Delegate option to highlight rows and columns in a table. Works fine in a first table, but I'm not able to separate the effect when using two different tables at the same page: at the second table, the rows are highlighted but the columns are not isolated just a the current table but highlight the first one.
I already tried different alternatives modifying the script with no luck.
See the code snippet:
$("table").delegate('td','mouseover mouseleave', function(e) {
if (e.type == 'mouseover') {
$(this).parent().addClass("hover");
$("colgroup").eq($(this).index()).addClass("hover");
}
else {
$(this).parent().removeClass("hover");
$("colgroup").eq($(this).index()).removeClass("hover");
}
});
table.blueTable {
border: 1px solid #1C6EA4;
text-align: left;
border-collapse: collapse;
}
table.blueTable td, table.blueTable th {
border: 1px solid #AAAAAA;
padding: 4px 4px;
}
table.blueTable tbody td {
font-size: 13px;
}
table.blueTable thead th {
font-size: 15px;
font-weight: bold;
color: #353535;
width: 80px;
}
.slim { width: 88px; }
.hover { background-color: #eee; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>First Table</h1>
<table class="blueTable">
<colgroup></colgroup>
<colgroup class="slim"></colgroup>
<colgroup class="slim"></colgroup>
<colgroup class="slim"></colgroup>
<colgroup class="slim"></colgroup>
<thead>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
</tr>
</thead>
<tbody>
<tr>
<td>cell1_1</td><td>cell2_1</td><td>cell3_1</td><td>cell4_1</td></tr>
<tr>
<td>cell1_2</td><td>cell2_2</td><td>cell3_2</td><td>cell4_2</td></tr>
<tr>
<td>cell1_3</td><td>cell2_3</td><td>cell3_3</td><td>cell4_3</td></tr>
<tr>
<td>cell1_4</td><td>cell2_4</td><td>cell3_4</td><td>cell4_4</td></tr>
</tbody>
</table>
<h1>Second Table</h1>
<table class="blueTable">
<colgroup></colgroup>
<colgroup class="slim"></colgroup>
<colgroup class="slim"></colgroup>
<colgroup class="slim"></colgroup>
<colgroup class="slim"></colgroup>
<thead>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
</tr>
</thead>
<tbody>
<tr>
<td>cell1_1</td><td>cell2_1</td><td>cell3_1</td><td>cell4_1</td></tr>
<tr>
<td>cell1_2</td><td>cell2_2</td><td>cell3_2</td><td>cell4_2</td></tr>
<tr>
<td>cell1_3</td><td>cell2_3</td><td>cell3_3</td><td>cell4_3</td></tr>
<tr>
<td>cell1_4</td><td>cell2_4</td><td>cell3_4</td><td>cell4_4</td></tr>
</tbody>
</table>
$("colgroup") doesn't refer to the colgroup inside the table that was clicked, just the first colgroup on the page. Try replacing
$("colgroup").eq(...)
with
$(this).closest("table").find("colgroup").eq(...)
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();
});
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>
<!DOCTYPE html>
<html>
<body>
<table border="1" style="width:100%">
<tr>
<th>A</th>
<th>B</th>
</tr>
<tr>
<td>10</td>
<td>10</td>
</tr>
</table>
</body>
</html>
The above html data provides a table which has corresponding rows and columns. I want a format in which lines between rows should be hidden only column lines and table border lines should be visible . Hope my question is clear now . I want to create a table where lines between rows should be hidden
You can use the following css:
JSFIDDLE https://jsfiddle.net/seadonk/uf37xzqh/3/
HTML
<table id="thetable">
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>2</td><td>2</td><td>2</td></tr>
</table>
CSS
#thetable {
border: 2px solid gray;
background: lightgray;
border-spacing: 0px;
border-collapse: collapse;
}
#thetable td{
border-right: 2px solid gray;
padding: 20px;
}
You need to set the css properties border and border-collapse on your table tag and set the right border for your td.
table {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
td {
border-right: 1px solid black;
text-align: center;
padding: 5px;
}
<table>
<tr>
<td> a </td>
<td> b </td>
</tr>
<tr>
<td> c </td>
<td> d </td>
</tr>
</table>
<table frame="box" rules="cols">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
try this
JsFieddle
HTML
<table style='border:solid' cellpadding="10" cellspacing="0">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</table>
css
td{border-right:solid}