Im trying to make an HTML table with a multi-level rows group/collapsed that is collapsed by default to the +Parnts.Group1 when loaded the page.
and have the + SubGroup1 collapsed by default when open +Parnts.Group1.
example of multi-level rows group/collapsed
A header
Another header
+Parnts.Group1
+Parnts.Group1
+ SubGroup1.
+ SubGroup1
- text
- text
All that I found is for tables with only one level.
I searched a lot for a solution, but the code is different every time, so I couldn't figure it out as I'm not an expert in coding.
also, I couldn't add the + - to the group in JS for the same reason.
this is my code
JS - CSS - HTML
var toggle_rows = function (element, parent) {
if ($(element).closest("tr").attr("state") == "opened") {
$("tr[parent~='" + parent + "']").each(function (i, obj) {
toggle_child_rows(obj, false);
});
$("tr[parent~='" + parent + "']").hide();
$(element).closest("tr").attr("state", "collapsed")
} else {
$("tr[parent~='" + parent + "']").each(function (i, obj) {
toggle_child_rows(obj, true);
});
$("tr[parent~='" + parent + "']").show();
$(element).closest("tr").attr("state", "opened");
}
};
var toggle_child_rows = function (obj, willShow) {
var name = null;
if ($(obj).attr("state") === "leaf") {
return;
} else {
name = $(obj).attr("rowname");
if ($(obj).attr("state") === "opened" && !willShow) {
$("tr[parent~='" + name + "']").each(function (i, elem) {
toggle_child_rows(elem, willShow);
$(elem).hide();
});
} else if ($(obj).attr("state") === "opened" && willShow) {
$("tr[parent~='" + name + "']").each(function (i, elem) {
toggle_child_rows(elem, willShow);
$(elem).show();
});
}
}
};
<CSS>
table {
border-collapse:collapse;
margin: 150px auto;
table-layout: fixed;
width: 750px;
word-wrap: break-word;
cursor: pointer;
}
.name {
text-align: center;
}
th, td {
border:1px solid #DDD;
}
th {
cursor: pointer;
background-color: #006098;
color:white;
position:center;
}
.level1 {
cursor: pointer;
background-color: #00C1C1;
}
.level2 {
cursor: pointer;
background-color: gray;
}
.level3 {
cursor: pointer;
background-color: #eaeaea;
}
.level4 {
cursor: pointer;
background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class='table table-hover table-bordered table-condensed cashflow_report'>
<thead>
<tr>
<th width="150px" class='name'></th>
<th width="300px" >Header1</th>
<th width="300px" >Header2</th>
</tr>
</thead>
<tbody>
<tr class='level1' rowname='inflow' state='opened'>
<td class='name'> <span onclick="toggle_rows(this, 'inflow');">
+ Parnts.Group1 </span> </td>
<td class='name'> <span onclick="toggle_rows(this, 'inflow');">
test </span> </td>
<td class='name'> <span onclick="toggle_rows(this, 'inflow');">
test </span> </td>
</tbody>
<tbody >
<tr class='level2' parent='inflow' rowname='in-ct-1' state='opened'>
<td class='name'> <span onclick="toggle_rows(this, 'in-ct-1');">
+ Group 1 </span></td>
<td>0</td>
<td>0</td>
</tr>
<tr class='level3' parent='in-ct-1' rowname='in-tt-1' state='opened'>
<td class='name'> <span onclick="toggle_rows(this, 'in-tt-1');">
+ Subgroup 1 </span></td>
<td>0</td>
<td>0</td>
</tr>
<tr class='level4' parent='in-tt-1' state='leaf'>
<td class='name'> Operation 1</td>
<td>0</td>
<td>0</td>
</tr>
<tr class='level3' parent='in-ct-1' rowname='in-tt-2' state='opened'>
<td class='name'> <span onclick="toggle_rows(this, 'in-tt-2');">
Subgroup 2</span></td>
<td>0</td>
<td>0</td>
</tr>
<tr parent='in-tt-2' state='leaf'>
<td class='name'> Operation 2</td>
<td>0</td>
<td>0</td>
</tr>
</tbody>
</table>
I finally found a solution after hours of trying and testing.
It's not perfect, and it could be better.
But it works.
$(document).ready(function() {
$('.hide').hide();
$('[data-toggle="toggle"]').change(function() {
$(this).parents().next('.hide').toggle();
});
});
$(document).ready(function() {
//add a class to track expanded / collapsed (for CSS styling)
$('.heading').addClass('hCollapsed');
$(".heading").click(function() {
//#heading is a cell, so go up to the parent, which is the first tr. Toggle the hide/show status of those rows.
$(this).parent().siblings().toggle();
//then adjust the classes accordingly (for CSS styling)
if ($(this).hasClass('hCollapsed')) {
$(this).removeClass('hCollapsed').addClass('hExpanded');
} else {
$(this).removeClass('hExpanded').addClass('hCollapsed');
}
});
});
table {
width: 100%;
}
table,
tr,
th,
td {
border: 1px solid black;
border-collapse: collapse;
font-family: Arial;
}
[data-toggle="toggle"] {
display: none;
}
label {
display: block;
}
th{
background-color: #006098;
color:white;
}
.level1{
background-color: #00C1C1;
color:white;
}
.level2{
background-color: #eaeaea;
}
hide {
display: block;
}
.hCollapsed::before {
content: " + ";
color:blue;
}
.hExpanded::before {
content: " - ";
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Name</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<!-- 1 -->
<tbody class="level1">
<tr >
<td colspan="2" >
<label for="parents" class="heading" > 1 </label>
<input type="checkbox" id="parents" data-toggle="toggle">
</td>
</tr>
</tbody>
<!-- 1.1 -->
<tbody class="hide" >
<tr class="level2">
<td>
<label for="sub1" >1.1 </label>
<input type="checkbox" id="sub1" data-toggle="toggle">
</td>
<td>
<label for="sub1" > 100 </label>
<input type="checkbox" data-toggle="toggle">
</td>
</tr>
<tr class="hide">
<td > 1.1.1 </td>
<td>300</td>
</tr>
<!-- 1.2 -->
<tr class="level2">
<td> <label for="sub2" >1.2</label>
<input type="checkbox" id="sub2" data-toggle="toggle">
</td>
<td> <label for="sub2" > 100 </label>
<input type="checkbox" data-toggle="toggle">
</td>
</tr>
<tr class="hide">
<td > 1.2.1 </td>
<td>30hhh0</td>
</tr>
<!-- 1.3 -->
<tr class="level2">
<td>
<label for="sub3" >1.3</label>
<input type="checkbox" id="sub3" data-toggle="toggle">
</td>
<td>
<label for="sub3" > 500 </label>
<input type="checkbox" data-toggle="toggle">
</td>
</tr>
<tr class="hide">
<td > 1.3.1 </td>
<td>jjjj</td>
</tr>
</tbody>
<!-------------------- 2 ---------------->
<tbody class="level1">
<tr>
<td colspan="2">
<label for="parents2" class="heading" >2</label>
<input type="checkbox" id="parents2" data-toggle="toggle">
</td>
</tr>
</tbody>
<!-- 2.1 -->
<tbody class="hide" >
<tr class="level2">
<td>
<label for="Sub1" >2.1</label>
<input type="checkbox" id="Sub1" data-toggle="toggle">
</td>
<td>
<label for="Sub1" >2.1</label>
<input type="checkbox" data-toggle="toggle">
</td>
</tr>
<tr class="hide">
<td > 2.1.1 </td>
<td>300</td>
</tr>
<!-- 2.2 -->
<tr class="level2">
<td>
<label for="Sub2" > 2.2 </label>
<input type="checkbox" id="Sub2" data-toggle="toggle">
</td>
<td>
<label for="Sub2" > 2.2 </label>
<input type="checkbox" data-toggle="toggle">
</td>
</tr>
<tr class="hide">
<td > 2.2.1 </td>
<td>678</td>
</tr>
<!-- -->
</tbody>
Related
I have an html table
<table class="table">
<thead class="table-primary">
<tr>
<th>Date</th>
<th>SKU</th>
<th style="width: 300px;">Activity</th>
<th>QTY</th>
<th>RATE</th>
<th>AMOUNT</th>
</tr>
</thead>
<tbody>
<tr>
<td>09/01/2020</td>
<td></td>
<td>
<strong>Test</strong><br />
Manish Rijal - JOB# 12345 <br />
1TestBiraz
</td>
<td style="text-align: center">78</td>
<td style="text-align: center">56</td>
<td style="text-align: center">99</td>
</tr>
<tr>
<td>09/01/2020</td>
<td></td>
<td>
<strong>qwert</strong><br />
Manish Rijal - JOB# 12345 <br />
asd
</td>
<td style="text-align: center">8</td>
<td style="text-align: center">4</td>
<td style="text-align: center">32</td>
</tr>
<tr>
<td>09/01/2020</td>
<td></td>
<td>
<strong> Leave</strong><br />
Manish Rijal - JOB# 12345 <br />
asd
</td>
<td style="text-align: center">8</td>
<td style="text-align: center">4</td>
<td style="text-align: center">32</td>
</tr>
</tbody>
</table>
<div>
<a style="margin-left: 305px;">BALANCE DUE</a>
<strong>$800.00</strong>
</div>
The value of the amount is dynamic and there might be multiple row. Right Now I have done hard coded for $800.00. How can I sum the value of all Amount Column and display in Balance Due. I tried by couldn't get there.
https://jsfiddle.net/n6qo3u1b/
If you want to get the prices from Quantity and Rate then you can do it like.
var price = 0;
$('table tbody tr').each(function() {
var rate = +$(this).find("td:nth-last-child(3)").text();
var amount = +$(this).find("td:nth-last-child(2)").text();
price = price + (rate * amount);
})
$('.price strong').text('$' + price)
Please note I've added the class price to the div that surrounds the "price/strong"
Demo
var price = 0;
$('table tbody tr').each(function() {
var rate = +$(this).find("td:nth-last-child(3)").text();
var amount = +$(this).find("td:nth-last-child(2)").text();
price = price + (rate * amount);
})
$('.price strong').text('$' + price)
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
margin-top: 30px;
}
td,
th {
/*border: 1px solid #dddddd;*/
text-align: left;
padding: 8px;
}
thead {
background: #DCE9F1
}
thead tr th {
color: #4F90BB;
}
tr:nth-child(even) {
background-color: #dddddd;
width: 50%;
}
hr {
color: #5A97BF;
width: 90%;
text-align: center;
height: 1px;
}
hr.new4 {
border: 1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<thead class="table-primary">
<tr>
<th>Date</th>
<th>SKU</th>
<th style="width: 300px;">Activity</th>
<th>QTY</th>
<th>RATE</th>
<th>AMOUNT</th>
</tr>
</thead>
<tbody>
<tr>
<td>09/01/2020</td>
<td></td>
<td>
<strong>Test</strong><br /> Manish Rijal - JOB# 12345 <br /> 1TestBiraz
</td>
<td style="text-align: center">78</td>
<td style="text-align: center">56</td>
<td style="text-align: center">99</td>
</tr>
<tr>
<td>09/01/2020</td>
<td></td>
<td>
<strong>qwert</strong><br /> Manish Rijal - JOB# 12345 <br /> asd
</td>
<td style="text-align: center">8</td>
<td style="text-align: center">4</td>
<td style="text-align: center">32</td>
</tr>
<tr>
<td>09/01/2020</td>
<td></td>
<td>
<strong> Leave</strong><br /> Manish Rijal - JOB# 12345 <br /> asd
</td>
<td style="text-align: center">8</td>
<td style="text-align: center">4</td>
<td style="text-align: center">32</td>
</tr>
</tbody>
</table>
<hr style="border-top: 1px dotted #5A97BF" />
<div class="price">
<a style="margin-left: 305px;">BALANCE DUE</a>
<strong>$800.00</strong>
</div>
You can also do it with vanilla javascript like so:
const nodes = document.querySelectorAll('td:last-child')
const arr = Array.from(nodes);
const res = arr.reduce((acc, curr) => {
return acc += Number(curr.textContent)
}, 0)
console.log(res);
I and trying to apply a blinking effect css class to the whole table when someone presses the button. However, some rows are not being affected by the blink class.
$("#alarm").click(function() {
$("#tableContainer").addClass("blink");
});
$("#stopAlarm").click(function() {
$("#tableContainer").removeClass("blink");
});
.heading {
text-align: center;
background-color: #C1C1C1;
}
.monitor {
text-align: center;
}
.row {
text-align: right;
background-color: powderblue;
}
div {
align-content: center;
}
th,
td {
min-width: 80px;
width: auto;
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
tr:nth-child(even) {
background-color: #F1F1F1;
}
.blink {
animation: blink 200ms infinite alternate;
}
/*blink effect color switcher*/
#keyframes blink {
from {
background-color: white;
}
to {
background-color: red;
}
}
;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table id="tableContainer">
<tr>
<th class="heading">dsgegaw</th>
<th class="heading">fvsegwaf</th>
<th class="heading">peaagwwa</th>
<th class="heading">p76uihx</th>
<th class="heading">gdjhrdu3</th>
<th class="heading">sg45y7ids</th>
<th class="heading">30jqnfj</th>
<th class="heading">][2proq2=0-i</th>
<th class="heading">-20=riojwkfl</th>
<th class="heading">t-09tujkjgf</th>
</tr>
<tr>
<td class="column"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
</tr>
<tr>
<td class="row">System Time</td>
<td>
<div id="p1"></div>
</td>
<td>
<div id="p11"></div>
</td>
<td>
<div id="c1"></div>
</td>
<td>
<div id="ca1"></div>
</td>
<td>
<div id="m1"></div>
</td>
<td>
<div id="mp1"></div>
</td>
</tr>
<tr>
<td class="row">Status</td>
<td>
<div id="p2"></div>
</td>
<td>
<div id="p21"></div>
</td>
<td>
<div id="c2"></div>
</td>
<td>
<div id="ca2"></div>
</td>
<td>
<div id="m2"></div>
</td>
<td>
<div id="mp2"></div>
</td>
</tr>
<tr>
<td class="row">Logged Time</td>
<td>
<div id="p3"></div>
</td>
<td>
<div id="p31"></div>
</td>
<td>
<div id="c3"></div>
</td>
</tr>
</table>
<button id="alarm" type="button">Start Alarm</button>
<button id="stopAlarm" type="button">Stop Alarm</button>
</body>
All the elements that have their own background-color style won't inherit the style from the container. You need to put the class on those elements.
$("#alarm").click(function() {
$("#tableContainer td, #tableContainer th").addClass("blink");
});
$("#stopAlarm").click(function() {
$("#tableContainer td, #tableContainer th").removeClass("blink");
});
.heading {
text-align: center;
background-color: #C1C1C1;
}
.monitor {
text-align: center;
}
.row {
text-align: right;
background-color: powderblue;
}
div {
align-content: center;
}
th,
td {
min-width: 80px;
width: auto;
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
tr:nth-child(even) {
background-color: #F1F1F1;
}
.blink {
animation: blink 200ms infinite alternate;
}
/*blink effect color switcher*/
#keyframes blink {
from {
background-color: white;
}
to {
background-color: red;
}
}
;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table id="tableContainer">
<tr>
<th class="heading">dsgegaw</th>
<th class="heading">fvsegwaf</th>
<th class="heading">peaagwwa</th>
<th class="heading">p76uihx</th>
<th class="heading">gdjhrdu3</th>
<th class="heading">sg45y7ids</th>
<th class="heading">30jqnfj</th>
<th class="heading">][2proq2=0-i</th>
<th class="heading">-20=riojwkfl</th>
<th class="heading">t-09tujkjgf</th>
</tr>
<tr>
<td class="column"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
</tr>
<tr>
<td class="row">System Time</td>
<td>
<div id="p1"></div>
</td>
<td>
<div id="p11"></div>
</td>
<td>
<div id="c1"></div>
</td>
<td>
<div id="ca1"></div>
</td>
<td>
<div id="m1"></div>
</td>
<td>
<div id="mp1"></div>
</td>
</tr>
<tr>
<td class="row">Status</td>
<td>
<div id="p2"></div>
</td>
<td>
<div id="p21"></div>
</td>
<td>
<div id="c2"></div>
</td>
<td>
<div id="ca2"></div>
</td>
<td>
<div id="m2"></div>
</td>
<td>
<div id="mp2"></div>
</td>
</tr>
<tr>
<td class="row">Logged Time</td>
<td>
<div id="p3"></div>
</td>
<td>
<div id="p31"></div>
</td>
<td>
<div id="c3"></div>
</td>
</tr>
</table>
<button id="alarm" type="button">Start Alarm</button>
<button id="stopAlarm" type="button">Stop Alarm</button>
</body>
Check This
$("#alarm").click(function() {
$("#tableContainer").addClass("blink");
$("#status").addClass("blink");
});
$("#stopAlarm").click(function() {
$("#tableContainer").removeClass("blink");
$("#status").removeClass("blink");
});
.heading {
text-align: center;
background-color: #C1C1C1;
}
.monitor {
text-align: center;
}
.row {
text-align: right;
background-color: powderblue;
}
div {
align-content: center;
}
th,
td {
min-width: 80px;
width: auto;
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
tr:nth-child(even) {
background-color: #F1F1F1;
}
.blink {
animation: blink 200ms infinite alternate;
}
/*blink effect color switcher*/
#keyframes blink {
from {
background-color: white;
}
to {
background-color: red;
}
}
;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table id="tableContainer">
<tr>
<th class="heading">dsgegaw</th>
<th class="heading">fvsegwaf</th>
<th class="heading">peaagwwa</th>
<th class="heading">p76uihx</th>
<th class="heading">gdjhrdu3</th>
<th class="heading">sg45y7ids</th>
<th class="heading">30jqnfj</th>
<th class="heading">][2proq2=0-i</th>
<th class="heading">-20=riojwkfl</th>
<th class="heading">t-09tujkjgf</th>
</tr>
<tr>
<td class="column"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
</tr>
<tr>
<td class="row">System Time</td>
<td>
<div id="p1"></div>
</td>
<td>
<div id="p11"></div>
</td>
<td>
<div id="c1"></div>
</td>
<td>
<div id="ca1"></div>
</td>
<td>
<div id="m1"></div>
</td>
<td>
<div id="mp1"></div>
</td>
</tr>
<tr id="status" class="status">
<td class="row">Status</td>
<td>
<div id="p2"></div>
</td>
<td>
<div id="p21"></div>
</td>
<td>
<div id="c2"></div>
</td>
<td>
<div id="ca2"></div>
</td>
<td>
<div id="m2"></div>
</td>
<td>
<div id="mp2"></div>
</td>
</tr>
<tr>
<td class="row">Logged Time</td>
<td>
<div id="p3"></div>
</td>
<td>
<div id="p31"></div>
</td>
<td>
<div id="c3"></div>
</td>
</tr>
</table>
<button id="alarm" type="button">Start Alarm</button>
<button id="stopAlarm" type="button">Stop Alarm</button>
</body>
The answer was to make my jQuery addClass and Remove Class to be more specific:
$("#alarm").click(function(){
$("#tableContainer th").addClass("blink");
$("#tableContainer td").addClass("blink");
});
$("#stopAlarm").click(function(){
$("#tableContainer th").removeClass("blink");
$("#tableContainer td").removeClass("blink");
});
I am trying to add a blinking effect to my table when a button is pressed. My code kind of achieves this by making the whole table blink however it makes the data in the cells without an existing css hard to read. Therefore, I am trying to figure out if it is possible to make the just the border of each cell have the blinking effect instead of the whole cell so that the data is still easily readable as seen in the status row. Is this possible without having to add a css to every single cell?
$("#alarm").click(function() {
$("#tableContainer").addClass("blink");
$("#tableContainer").addClass("blink");
});
$("#stopAlarm").click(function() {
$("#tableContainer").removeClass("blink");
$("#tableContainer").removeClass("blink");
});
.heading {
text-align: center;
background-color: #C1C1C1;
}
.monitor {
text-align: center;
}
.row {
text-align: right;
background-color: powderblue;
}
div {
align-content: center;
}
th,
td {
min-width: 80px;
width: auto;
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
tr:nth-child(even) {
background-color: #F1F1F1;
}
.blink {
animation: blink 200ms infinite alternate;
}
/*blink effect color switcher*/
#keyframes blink {
from {
background-color: white;
}
to {
background-color: red;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table id="tableContainer">
<tr>
<th class="heading">dsgegaw</th>
<th class="heading">fvsegwaf</th>
<th class="heading">peaagwwa</th>
<th class="heading">p76uihx</th>
<th class="heading">gdjhrdu3</th>
<th class="heading">sg45y7ids</th>
<th class="heading">30jqnfj</th>
<th class="heading">][2proq2=0-i</th>
<th class="heading">-20=riojwkfl</th>
<th class="heading">t-09tujkjgf</th>
</tr>
<tr>
<td class="column"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
</tr>
<tr>
<td class="row">System Time</td>
<td>
<div id="p1">hrgfawf</div>
</td>
<td>
<div id="p11">waffejtj</div>
</td>
<td>
<div id="c1">awfwhr</div>
</td>
<td>
<div id="ca1">afcascwef</div>
</td>
<td>
<div id="m1">grthrh</div>
</td>
<td>
<div id="mp1"></div>
</td>
</tr>
<tr>
<td class="row">Status</td>
<td>
<div id="p2">awegrthrth</div>
</td>
<td>
<div id="p21">DFAWFERGE</div>
</td>
<td>
<div id="c2">5687w43t</div>
</td>
<td>
<div id="ca2">fq3t34ytg5</div>
</td>
<td>
<div id="m2">oik768yq3</div>
</td>
<td>
<div id="mp2">90['97t</div>
</td>
</tr>
<tr>
<td class="row">Logged Time</td>
<td>
<div id="p3">4t3twfe6u</div>
</td>
<td>
<div id="p31">76i4y3t3</div>
</td>
<td>
<div id="c3">vetg34wt43</div>
</td>
</tr>
</table>
<button id="alarm" type="button">Start Alarm</button>
<button id="stopAlarm" type="button">Stop Alarm</button>
</body>
To achieve this you first need to put borders on the th and td elements. Then you can amend the .blink selector to amend the colours of the border, instead of the background, like this:
$("#alarm").click(function() {
$("#tableContainer").addClass("blink");
});
$("#stopAlarm").click(function() {
$("#tableContainer").removeClass("blink");
});
.heading {
text-align: center;
background-color: #C1C1C1;
}
.monitor {
text-align: center;
}
.row {
text-align: right;
background-color: powderblue;
}
div {
align-content: center;
}
table {
border-collapse: collapse;
}
th,
td {
min-width: 80px;
width: auto;
text-align: center;
padding-left: 10px;
padding-right: 10px;
border: 2px solid #FFF;
}
tr:nth-child(even) {
background-color: #F1F1F1;
}
.blink th,
.blink td {
animation: blink 200ms infinite alternate;
}
/*blink effect color switcher*/
#keyframes blink {
from {
border-color: white;
}
to {
border-color: red;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableContainer">
<tr>
<th class="heading">dsgegaw</th>
<th class="heading">fvsegwaf</th>
<th class="heading">peaagwwa</th>
<th class="heading">p76uihx</th>
<th class="heading">gdjhrdu3</th>
<th class="heading">sg45y7ids</th>
<th class="heading">30jqnfj</th>
<th class="heading">][2proq2=0-i</th>
<th class="heading">-20=riojwkfl</th>
<th class="heading">t-09tujkjgf</th>
</tr>
<tr>
<td class="column"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
</tr>
<tr>
<td class="row">System Time</td>
<td>
<div id="p1">hrgfawf</div>
</td>
<td>
<div id="p11">waffejtj</div>
</td>
<td>
<div id="c1">awfwhr</div>
</td>
<td>
<div id="ca1">afcascwef</div>
</td>
<td>
<div id="m1">grthrh</div>
</td>
<td>
<div id="mp1"></div>
</td>
</tr>
<tr>
<td class="row">Status</td>
<td>
<div id="p2">awegrthrth</div>
</td>
<td>
<div id="p21">DFAWFERGE</div>
</td>
<td>
<div id="c2">5687w43t</div>
</td>
<td>
<div id="ca2">fq3t34ytg5</div>
</td>
<td>
<div id="m2">oik768yq3</div>
</td>
<td>
<div id="mp2">90['97t</div>
</td>
</tr>
<tr>
<td class="row">Logged Time</td>
<td>
<div id="p3">4t3twfe6u</div>
</td>
<td>
<div id="p31">76i4y3t3</div>
</td>
<td>
<div id="c3">vetg34wt43</div>
</td>
</tr>
</table>
<button id="alarm" type="button">Start Alarm</button>
<button id="stopAlarm" type="button">Stop Alarm</button>
I am working with a MVC view that has a 3 columns table. The table displays a list of Products. Column #1 (product name) contains links to a product specific page. When a user clicks on the links, I want to expand and display the product description and at the end of the product description, I want to include a link that takes the user to the product page. If a user clicks on the link again, I want to collapse it back. I have a model that represents the product and the product description is stored in its own field.
The table is built and populated as below. Any insight on how to achieve the expand/collapse via jQuery is very much appreciated.
<table id="products">
<thead>
<tr>
<th>Product Name</th>
<th>Type</th>
<th>Price</th>
</tr>
</thead>
<tbody>
foreach (product p in model.products)
{
<tr>
<td>
#p.name
</td>
<td>
#p.type
</td>
<td>
#p.price
</td>
</tr>
}
</tbody>
</table>
The easiest way to to utilize product IDs as well. Add the specific product ID as a data attribute, then using jQuery, pull that attribute and reuse it to target rows containing the descriptions.
$('.productname').on('click', function() {
var id= $(this).attr('data-id');
$(this).toggleClass('active');
$('.data' + id).slideToggle(500);
});
.hide {display: none; }
/* -- below is just to "pretty up" the snippet ------ */
table {
width: 100%;
background: #eee;
border-collapse: collapse;
border: 1px solid #aaa;}
th { background: #cef; color: #4cf; text-transform: uppercase; font-size: 0.8em; padding: 3px;border: 1px solid #aaa;}
td { font-size: 1.1em; padding: 5px 10px; border: 1px solid #aaa; border-bottom: none; }
tr.collapsed td { padding: 0; border: none; }
.productname:hover, .active { background: #eff; }
.productdesc { padding: 5px 10px; background: #eff; border-top: 1px solid #aaa; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="products">
<thead>
<tr>
<th>Product Name</th>
<th>Type</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<!--
foreach (product p in model.products)
{
-->
<tr class="productname" data-id="prodID00">
<!-- Change data-id="prodID00" to data-id="#p.productID" -->
<td>
#p.name
</td>
<td>
#p.type
</td>
<td>
#p.price
</td>
</tr>
<tr class="collapsed">
<td colspan="3">
<div class="hide productdesc dataprodID00">
<!-- Change class="hide productdesc dataprodID00" to class="hide productdesc data#p.productID" -->
<p>#p.productDescription #p.productLink</p></div>
</td>
</tr>
<!-- } -->
<!-- below are just manual iterations of the row above -->
<tr class="productname" data-id="prodID01">
<td>
#p.name
</td>
<td>
#p.type
</td>
<td>
#p.price
</td>
</tr>
<tr class="collapsed">
<td colspan="3">
<div class="hide productdesc dataprodID01">
<p>product description and link</p></div>
</td>
</tr>
<tr class="productname" data-id="prodID02">
<td>
#p.name
</td>
<td>
#p.type
</td>
<td>
#p.price
</td>
</tr>
<tr class="collapsed">
<td colspan="3">
<div class="hide productdesc dataprodID02">
<p>product description and link</p></div>
</td>
</tr>
<tr class="productname" data-id="prodID03">
<td>
#p.name
</td>
<td>
#p.type
</td>
<td>
#p.price
</td>
</tr>
<tr class="collapsed">
<td colspan="3">
<div class="hide productdesc dataprodID03">
<p>product description and link</p></div>
</td>
</tr>
<tr class="productname" data-id="prodID04">
<td>
#p.name
</td>
<td>
#p.type
</td>
<td>
#p.price
</td>
</tr>
<tr class="collapsed">
<td colspan="3">
<div class="hide productdesc dataprodID04">
<p>product description and link</p></div>
</td>
</tr>
</tbody>
</table>
Note where the prodID is located in the rows.....
I removed the foreach function and brackets because it's invalid HTML. But if they are there and dynamically generate the HTML it'll work fine. The rows I used are just manual iterations opposed to dynamic iterations.
Am trying to shorten the table.I have to display only first 3 rows and remaining are hidden.and at the bottom of the table thers is a link to display remaining rows.How it is possible
code
$.ajax({
url: currentUrl,
cache: false
}).done(function (report) {
var testhistbl =
'<br><table width="680px" id="report" > <tbody id="mytbody"><tr style="display: table-row;"><th valign="center">User</th><th valign="center" >Test Name</th><th valign="center">VM</th><th valign="center">Browsers</th><th valign="center">Result</th><th id="headerid"></th></tr>';
recentreport.forEach(function (test) {
testhistbl += '<tr class="odd"><td >' + email + '</td><td>' +
test.names + ' </td><td >' + test.os + '</td><td >' +
result.browser + '</td><td >' + test.replace('Test ', '') +
' </td> <td><div class="arrow" onclick="expandRow();"></div></td></tr><tr style="display: none;" ><td style="background-color: #C0C0C0;color:black;" colspan="5">' +
test.passfail +
' </td><td style="background-color: #C0C0C0;color:white;" ></td></tr>';
});
})
testhistbl +=
'<tr id="more"><td >Show More</td> </tr></tbody></table>';
$('#testhistyTbl').html(testhistbl);
showMore(report.length);
});
function showMore(len) {
var $table = $('table').find('tbody'); // tbody containing all the rows
var numRows = $('.odd').length;
if (len > '3') {
$("#more").show();
} else {
$("#more").hide();
}
$('#more').click(function () {
});
}
i don’t know whatto perform inside the more.click function.
Please look at table mytable
here i only want to display first 3 rows and while clicking show more link i have to display the remaining rows also
Here is a JavaScript Code for you:
function DisplayOnlyRows(count){
var i =0;
$('#report tr.odd').each(function(){
if(i >= count){
$(this).hide();
}
i++;
});
}
DisplayOnlyRows(3);
$("#show_more").click(function(){
$("#mytbody tr.odd").not(':visible').show();
$(this).hide(); // To hide the `show_more` button
});
So, DisplayOnlyRows takes count of table rows that should be visible, all the rest rows will be hidden. Also, on show_more button click event we are showing all hidden table rows. That's it.
Here's how a "show more" button could be implemented:
<button>Show more/less</button>
with the JQuery toggle function
$("button").click(function () {
var countrows = 0;
$('#report tr.odd').each(function () {
countrows++;
if (countrows > 3) {
$(this).toggle();
}
})
});
Explanation: with $('#report tr.odd').each(function() you loop through all the rows in the table #report of class odd. When the counter countrows is greater than 3 you change the visibility of the row with toggle().
Snippet:
$("button").click(function() {
var countrows = 0;
$('#report tr.odd').each(function() {
countrows++;
if (countrows > 3) {
$(this).toggle();
}
})
});
body {
font-family: Arial, Helvetica, Sans-Serif;
font-size: 0.8em;
}
#report {
border-collapse: collapse;
}
#report h4 {
margin: 0px;
padding: 0px;
}
#report img {
float: right;
}
#report ul {
margin: 10px 0 10px 40px;
padding: 0px;
}
#report th {
background: #0196AC repeat-x scroll center left;
color: #fff;
padding: 7px 15px;
text-align: left;
}
#report td {
background: #C7DDEE none repeat-x scroll center left;
color: #000;
padding: 7px 15px;
}
#report tr.odd td {
background: #fff url(http://www.jankoatwarpspeed.com/wp-content/uploads/examples/expandable-rows/row_bkg.png) repeat-x scroll center left;
cursor: pointer;
}
#report div.arrow {
background: transparent url(http://www.jankoatwarpspeed.com/wp-content/uploads/examples/expandable-rows/arrows.png) no-repeat scroll 0px -16px;
width: 16px;
height: 16px;
display: block;
}
#report div.up {
background-position: 0px 0px;
}
#report
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="report" width="680px">
<tbody id="mytbody">
<tr style="display: table-row;">
<th valign="center">User</th>
<th valign="center">Test Name</th>
<th valign="center">VM</th>
<th valign="center">Browsers</th>
<th valign="center">Result</th>
<th id="headerid"></th>
</tr>
<tr class="odd">
<td>anju#gmail.com</td>
<td>Purchase</td>
<td>VM-WIN7-64</td>
<td>FF,GC,IE</td>
<td><span class="pass"><b><font color="green">Passed<b></b></font></b></span><b><font color="green"><b> </b>
</font>
</b>
</td>
<td>
<div class="arrow" onclick="expandRow();"></div>
</td>
</tr>
<tr style="display: none;">
<td style="background-color: #C0C0C0;color:black;" colspan="5">Checking Start button: Ok
<br>Selecting Art: Ok
<br>Test <span class="pass"><b><font color="green">Passed<b></b></font></b></span><b><font color="green"><b><br> </b>
</font>
</b>
</td>
<td style="background-color: #C0C0C0;color:white;"></td>
</tr>
<tr class="odd">
<td>anju#gmail.com</td>
<td>Art Test</td>
<td>VM-WIN7-64</td>
<td>FF,GC,IE</td>
<td><span class="pass"><b><font color="green">Passed<b></b></font></b></span><b><font color="green"><b> </b>
</font>
</b>
</td>
<td>
<div class="arrow" onclick="expandRow();"></div>
</td>
</tr>
<tr style="display: none;">
<td style="background-color: #C0C0C0;color:black;" colspan="5">Checking Start button: Ok
<br>Selecting Art: Ok
<br>Test <span class="pass"><b><font color="green">Passed<b></b></font></b></span><b><font color="green"><b><br> </b>
</font>
</b>
</td>
<td style="background-color: #C0C0C0;color:white;"></td>
</tr>
<tr class="odd">
<td>anju#gmail.com</td>
<td>email confirmation</td>
<td>VM-WIN7-64</td>
<td>GC</td>
<td><span class="pass"><b><font color="green">Passed<b></b></font></b></span><b><font color="green"><b> </b>
</font>
</b>
</td>
<td>
<div class="arrow" onclick="expandRow();"></div>
</td>
</tr>
<tr style="display: none;">
<td style="background-color: #C0C0C0;color:black;" colspan="5">Checking Start button: Ok
<br>Selecting Art: Ok
<br>Test <span class="pass"><b><font color="green">Passed<b></b></font></b></span><b><font color="green"><b><br> </b>
</font>
</b>
</td>
<td style="background-color: #C0C0C0;color:white;"></td>
</tr>
<tr class="odd" style="display: none;">
<td>anju#gmail.com</td>
<td>Art Test</td>
<td>VM-WIN7-64</td>
<td>FF</td>
<td><span class="fail"><b><font color="red">Failed</font></b></span>
<font color="red"></font>
</td>
<td>
<div class="arrow" onclick="expandRow();"></div>
</td>
</tr>
<tr style="display: none;">
<td style="background-color: #C0C0C0;color:black;" colspan="5">Checking Start button: Ok
<br>Selecting Art: Ok
<br>Test <span class="fail"><b><font color="red">Failed</font></b></span>
<font color="red">
<br>
</font>
</td>
<td style="background-color: #C0C0C0;color:white;"></td>
</tr>
<tr class="odd" style="display: none;">
<td>anju#gmail.com</td>
<td>Art Test</td>
<td>VM-WIN7-64</td>
<td>FF</td>
<td><span class="pass"><b><font color="green">Passed<b></b></font></b></span><b><font color="green"><b> </b>
</font>
</b>
</td>
<td>
<div class="arrow" onclick="expandRow();"></div>
</td>
</tr>
<tr style="display: none;">
<td style="background-color: #C0C0C0;color:black;" colspan="5">Checking Start button: Ok
<br>Selecting Art: Ok
<br>Test <span class="pass"><b><font color="green">Passed<b></b></font></b></span><b><font color="green"><b><br> </b>
</font>
</b>
</td>
<td style="background-color: #C0C0C0;color:white;"></td>
</tr>
</tbody>
</table>
<button> Show more/less</button>
Updated Jsfiddle here