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();
});
Related
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'm very new to this and trying to work out how something works that someone previous to me has implemented and I need to alter.
We have a table with say 3 or 4 headers and at present one row below it.
JavaScript is used so that upon clicking on a row, it expand to display the next row.
What I'm trying to do is have another table within one of the rows that only shows after expanding.
$(document).ready(function(){
$("#report66 tr:odd").addClass("odd");
$("#report66 tr:not(.odd)").hide();
$("#report66 tr:first-child").show();
$("#report66 tr.odd").click(function(){
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
});
.table.tableSection {
display: table;
width: 500%;
}
.table.tableSection thead, table.tableSection tbody {
float: left;
width: 100%;
}
.table.tableSection tbody {
overflow: auto;
height: 250px;
}
.table.tableSection tr {
width: 100%;
display: table;
text-align: left;
}
.table.tableSection th, table.tableSection td {
width: 33%;
}
.td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 5px;
background-color: #00565c;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<table id='report66'>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
</tr>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<td>Data4</td>
<tr>
<td colspan='8'>
Information
Information
<table>
<th>Test</th>
<tr>
<td>Test</td>
</table>
</table>
So with this you can see that upon selecting the first row of data it expands and shows the next row. The table within that row, is collapsed and you have to expand this.
Main question is, how can I change this so that the 2nd table is not collapsed? (I'm not bothered about collapsing it)
There are a lot of different methods of achieving this but every single one I find, doesn't seem to fit what I need.
EDIT WITH ORIGINAL CODE SNIPPET
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#report66 tr.information-row').hide();
$("#report66 tr:not(.information-row)").click(function(){
$('#report66 tr.information-row').toggle();
});
});
</script>
<style>
.new table {
table-layout: fixed;
width: 100% ;
}
</style>
<?php
if($replacementpending >= 1)
{
echo "<h4><center><b>Network | Pending Acceptance</b></center></h4>";
$sql = "SELECT * FROM `stock`.`replacements.joblog` WHERE `status` = 'Pending' AND `ownership` = 'Stock' ORDER BY `id` ASC";
$retval = mysqli_query( $conn, $sql );
if(! $retval ) {
die('Could not get data: ' . mysqli_error());
}
echo
"<table border='1'>
<table id='report66'>
<tr>
<th style='background-color:#003033'>DB Ref</th>
<th style='background-color:#003033'>Ticket Ref</th>
<th style='background-color:#003033'>Item Requested</th>
<th style='background-color:#003033'>Customer</th>
<th style='background-color:#003033'><center><span class='glyphicon glyphicon-circle-arrow-down'></span></center></th>
</tr>";
while($row = mysqli_fetch_array($retval)) {
echo "<tr>";
echo
"<td>{$row['id']}</td>".
"<td>{$row['req_ticketref']}</td>".
"<td>{$row['req_model']}</td>".
"<td>{$row['req_customer']}</td>".
"<td style='table-layout: fixed; width: 3%'><center><span class='glyphicon glyphicon-circle-arrow-down'></span></center></td>";
}
echo
"
<tr class='information-row' style='background-color:#00181a'>
<td colspan='8' style='background-color:#00181a'>
";
echo "
<center><h4><b>Additional information</b></h4>
<table style='table-layout: fixed; width: 70%'>
<th style='background-color:#003033;text-align:right'>CI Name</th><td>{$row['ciref']}</td><tr>
<th style='background-color:#003033;text-align:right'>Requested By</th><td>{$row['req_name']}</td><tr>
<th style='background-color:#003033;text-align:right'>Ticket Reference</th><td>{$row['req_ticketref']}</td><tr>
<th style='background-color:#003033;text-align:right'>Customer</th><td>{$row['req_customer']}</td><tr>
<th style='background-color:#003033;text-align:right'>Date/Time Logged</th><td>{$row['datetimelogged']}</td><tr>
</table>
<br>
<legend></legend>
<h4><b>Delivery Details</b></h4>
<table style='table-layout: fixed; width: 70%'>
<th style='background-color:#003033;text-align:right'>End User Company Name</th><td>{$row['endusername']}</td><tr>
<th style='background-color:#003033;text-align:right'>Address Line 1</th><td>{$row['address1']}</td><tr>
<th style='background-color:#003033;text-align:right'>Address Line 2</th><td>{$row['address2']}</td><tr>
<th style='background-color:#003033;text-align:right'>City</th><td>{$row['city']}</td><tr>
<th style='background-color:#003033;text-align:right'>Post Code</th><td>{$row['postcode']}</td><tr>
<th style='background-color:#003033;text-align:right'>Country</th><td>{$row['country']}</td><tr>
</table>
<br>
</center>
</td>
</tr>
";
}
echo "</table>";
}
?>
When you do $("#report66 tr:not(.odd)").hide(); you actually hide all tr elements inside the main table, which do not have the .odd class name. Since you have another table inside the main one, this rule applies to the tr elements in it.
You can explicitly show all rows in the inner table:
$(document).ready(function(){
$("#report66 tr:odd").addClass("odd");
$("#report66 tr:not(.odd)").hide();
$("#report66 tr:first-child").show();
$("#report66 tr table tr").show(); // Show all inner table rows
$("#report66 tr.odd").click(function(){
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
});
.table.tableSection {
display: table;
width: 500%;
}
.table.tableSection thead, table.tableSection tbody {
float: left;
width: 100%;
}
.table.tableSection tbody {
overflow: auto;
height: 250px;
}
.table.tableSection tr {
width: 100%;
display: table;
text-align: left;
}
.table.tableSection th, table.tableSection td {
width: 33%;
}
.td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 5px;
background-color: #00565c;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<table id='report66'>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
</tr>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<td>Data4</td>
<tr>
<td colspan='8'>
Information
Information
<table>
<th>Test</th>
<tr>
<td>Test</td>
</table>
</table>
EDIT
If you want to have multiple visible cells, which toggle the visibility of the information row right after the row they are in, the script can be simplified and you can add a specific class to that row:
$(document).ready(function () {
$('#report66 tr.information-row').hide();
$("#report66 tr:not(.information-row)").click(function () {
$(this).next().toggle();
});
});
.table.tableSection {
display: table;
width: 500%;
}
.table.tableSection thead, table.tableSection tbody {
float: left;
width: 100%;
}
.table.tableSection tbody {
overflow: auto;
height: 250px;
}
.table.tableSection tr {
width: 100%;
display: table;
text-align: left;
}
.table.tableSection th, table.tableSection td {
width: 33%;
}
.td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 5px;
background-color: #00565c;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<table id='report66'>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
</tr>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<td>Data4</td>
</tr>
<tr class="information-row">
<td colspan="8">
Information
Information
<table>
<th>Test</th>
<tr>
<td>Test</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Data5</td>
<td>Data6</td>
<td>Data7</td>
<td>Data8</td>
</tr>
<tr class="information-row">
<td colspan="8">
Information 2
Information 2
<table>
<th>Test</th>
<tr>
<td>Test</td>
</tr>
</table>
</td>
</tr>
</table>
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.
table td {
border: 1px solid black;
}
<table>
<thead>
<th>
col1
</th>
<th>
col2
</th>
</thead>
<tbody>
<tr>
<td>field1</td>
<td>field2</td>
</tr>
<tr>
<td colspan="2">The above row is number 1</td>
</tr>
<tr>
<td>field3</td>
<td>field4</td>
</tr>
<tr>
<td colspan="2">The above row is number 2</td>
</tr>
</tbody>
</table>
What I want?
Well I have this HTML code.
I want to put row description but without the use of a useless TR tag.
Reason:
I am sorting on the basis of column.
The column value is integer , and when I sort, all row description comes at bottom and field rows are sorted on top. But the row description should be attached to parent row.
Question:
How to attach it, so that after sort the table on basis of column, rows descriptions don't get spoiled ?
It's not an amazing solution, but you can try in this way:
<table>
<thead>
<th>
col1
</th>
<th>
col2
</th>
</thead>
<tbody>
<tr>
<td>
field1
</td>
<td>field2</td>
<td>
<div>
description
</div>
</td>
</tr>
<tr>
<td>field3</td>
<td>field4</td>
<td>
<div>
description
</div>
</td>
</tr>
</tbody>
</table>
css:
table,
thead,
tbody,
tr {
display: block;
clear: both;
}
table {
width: 130px;
}
thead {
height: 30px;
}
th,
td {
width: 60px;
float: left;
height: 30px;
border: 1px solid black;
}
td {
margin-top: 30px;
}
tr {
height: 60px;
position: relative;
}
tr td:last-child {
width: 0;
overflow: hidden;
border: none;
}
div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
}
https://jsfiddle.net/4xbbzzg5/
<!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}