I am trying to add nested numbering on a table in which n number of trs can be added dynamically trs added dynamically.
.ssection {
background-color: lightgrey;
border-bottom: thin dotted black;
}
.sLot {
padding-left: 30px;
background-color: lightgrey;
}
.sLotDesc {
padding-left: 40px;
background-color: lightgrey;
}
.sLotExtendedPrc {
background-color: lightgrey;
width: 100%;
text-align: right;
}
.sLotSavingPrc {
background-color: lightgrey;
width: 100%;
text-align: right;
}
.sLotLineItem {
background-color: lightyellow;
padding-left: 90px;
}
.sLotLineItemPrice,
.sLotLineItemQuantity,
.sLotLineItemExtendedPrice,
.sLotLineItemSaving {
background-color: lightyellow;
width: 100%;
text-align: right;
}
<table style="width:100%;">
<tr class="ssection">
<td colspan="4">Introduction</td>
<tr class="sLot">
<td class="sLot" colspan="4">Laptops and Desktops</td>
<tr class="sLotDesc">
<td class="sLotDesc" colspan="4">Laptop Description</td>
</tr>
</tr>
<tr >
<td></td>
<td>Initial</td>
<td>Historic</td>
<td>Reserve</td>
</tr>
<tr class="ssection">
<td colspan="4">Pricing</td>
</tr>
<tr class="sLot">
<td class="sLot" colspan="4">Lot tile</td>
</tr>
<tr class="sLotDesc">
<td class="sLotDesc" colspan="4">Lot Description</td>
</tr>
<tr class="sLotExtendedPrc">
<td class="sLotExtendedPrc">Extended Prc</td>
<td class="sLotExtendedPrcInitialVal">110</td>
<td class="sLotExtendedPrcHistoricVal">110</td>
<td class="sLotExtendedPrcReserveVal">110</td>
</tr>
<tr class="sLotSavingPrc">
<td class="sLotSavingPrc">Saving Prc</td>
<td class="sLotSavingPrcInitialVal">120</td>
<td class="sLotSavingPrcHistoricVal">120</td>
<td class="sLotSavingPrcReserveVal">120</td>
</tr>
<tr class="sLotLineItem">
<td class="sLotLineItem">Lineitem 1</td>
</tr>
<tr class="sLotLineItemPrice">
<td class="sLotLineItemPrice">Price</td>
<td class="sLotLineItemPriceInititalVal">130</td>
<td class="sLotLineItemPriceHistoricVal">130</td>
<td class="sLotLineItemPriceReserveVal">130</td>
</tr>
<tr class="sLotLineItemQuantity">
<td class="sLotLineItemQuantity">Quantity</td>
<td class="sLotLineItemQuantityInitialVal">140</td>
<td class="sLotLineItemQuantityHistoricVal">140</td>
<td class="sLotLineItemQuantityReserveVal">140</td>
</tr>
<tr class="sLotLineItemExtendedPrice">
<td class="sLotLineItemExtendedPrice">Extended Price</td>
<td class="sLotLineItemExtendedPriceInitialVal">150</td>
<td class="sLotLineItemExtendedPriceHistoricVal">150</td>
<td class="sLotLineItemExtendedPriceReserveVal">150</td>
</tr>
<tr class="sLotLineItemSaving">
<td class="sLotLineItemSaving">Saving</td>
<td class="sLotLineItemSavingInitialVal">160</td>
<td class="sLotLineItemSavingHistoricVal">160</td>
<td class="sLotLineItemSavingReserveVal">160</td>
</tr>
<table>
Desired Result
Sections are the outer units. Sections can contain any number of lots, every lot in turn can contain many lineitems.
Related
For my site I have a table which I've done here: https://jsfiddle.net/stw4jyq8/
table {
width: 600px;
}
th,
td {
padding: 7px 10px 10px 10px;
}
th {
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 90%;
bottom-border: 2px solid #111111;
border-top: 1px solid #999;
text-align: left;
}
tr.even {
background-color: #efefef;
}
tr:hover {
background-color: #c3e6e5;
}
<table width="50%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th></th>
<th>Per 4 Pack(200G)</th>
<th>Per 100g</th>
<th>Per Buttery(50G)</th>
</tr>
<tr>
<th>Calories</th>
<td>724</td>
<td>362</td>
<td>181</td>
</tr>
<tr class="even">
<th>Fat</th>
<td>43.1g</td>
<td>21.6g</td>
<td>10.8g</td>
</tr>
<tr>
<th>Saturated</th>
<td>15.7g</td>
<td>7.9g</td>
<td>3.9g</td>
</tr>
<tr class="even">
<th>Sodium</th>
<td>1,941.9mg</td>
<td>971mg</td>
<td>485.5mg</td>
</tr>
<tr>
<th>Carbohydrates</th>
<td>78.6g</td>
<td>39.3g</td>
<td>19.7g</td>
</tr>
<tr class="even">
<th>Fiber</th>
<td>0g</td>
<td>0g</td>
<td>0g</td>
</tr>
<tr>
<th>Sugar</th>
<td>10.9g</td>
<td>5.5g</td>
<td>2.7g</td>
</tr>
<tr class="even">
<th>Protein</th>
<td>10.5g</td>
<td>5.3g</td>
<td>2.6g</td>
</tr>
</table>
It looks fine when being viewed on a laptop but it doesn't look great when in mobile view. What I'm looking to do is that when I'm in mobile view it will change to something like:
and then underneath it will be a separate table for per 100g and then a 3rd for per buttery if that makes sense?
For this I am not sure how I could go about that though, would someone be able to point me in the right direction?
I'm thinking this is the best direction to go with? Unless someone has a better idea? Thanks again.
As a first lead, and despite agreeing with the suggestions for a select box, here's how you would have to do it with 3 tables for mobile:
Show your table as you did, but set a class to the columns to ease hiding them and styling them in general
Repeat your table 2 more times with only one data column each time (per 100g, per buttery)
Hide those 2 additional tables on large screens (by default) using CSS
Use a media query to trigger the changes:
Hide 3rd and 4th columns in your large table
Show both mobile tables
Adjust widths for better display
You can see the change in display in the below snippet by adjusting your window size
table.main {
width: 600px;
}
table.mobile {
display: none;
}
table.composition {
border: none;
border-spacing: 0;
border-collapse: collapse;
}
th,
td {
padding: 7px 10px 10px 10px;
}
th {
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 90%;
bottom-border: 2px solid #111111;
border-top: 1px solid #999;
text-align: left;
}
tr:nth-child(2n) {
background-color: #efefef;
}
tr:hover {
background-color: #c3e6e5;
}
#media screen and (max-width: 600px) {
table.main .per-50g {
display: none;
}
table.main .per-100g {
display: none;
}
table.mobile {
display: table;
}
table.composition {
width: 100%;
}
table.composition td {
width: 50%;
}
}
<table class="main composition">
<tr>
<th></th>
<th>Per 4 Pack(200G)</th>
<th class="per-100g">Per 100g</th>
<th class="per-50g">Per Buttery(50G)</th>
</tr>
<tr>
<th>Calories</th>
<td>724</td>
<td class="per-100g">362</td>
<td class="per-50g">181</td>
</tr>
<tr>
<th>Fat</th>
<td>43.1g</td>
<td class="per-100g">21.6g</td>
<td class="per-50g">10.8g</td>
</tr>
<tr>
<th>Saturated</th>
<td>15.7g</td>
<td class="per-100g">7.9g</td>
<td class="per-50g">3.9g</td>
</tr>
<tr>
<th>Sodium</th>
<td>1,941.9mg</td>
<td class="per-100g">971mg</td>
<td class="per-50g">485.5mg</td>
</tr>
<tr>
<th>Carbohydrates</th>
<td>78.6g</td>
<td class="per-100g">39.3g</td>
<td class="per-50g">19.7g</td>
</tr>
<tr>
<th>Fiber</th>
<td>0g</td>
<td class="per-100g">0g</td>
<td class="per-50g">0g</td>
</tr>
<tr>
<th>Sugar</th>
<td>10.9g</td>
<td class="per-100g">5.5g</td>
<td class="per-50g">2.7g</td>
</tr>
<tr>
<th>Protein</th>
<td>10.5g</td>
<td class="per-100g">5.3g</td>
<td class="per-50g">2.6g</td>
</tr>
</table>
<table class="mobile per-100g composition">
<tr>
<th></th>
<th class="per-100g">Per 100g</th>
</tr>
<tr>
<th>Calories</th>
<td class="per-100g">362</td>
</tr>
<tr>
<th>Fat</th>
<td class="per-100g">21.6g</td>
</tr>
<tr>
<th>Saturated</th>
<td class="per-100g">7.9g</td>
</tr>
<tr>
<th>Sodium</th>
<td class="per-100g">971mg</td>
</tr>
<tr>
<th>Carbohydrates</th>
<td class="per-100g">39.3g</td>
</tr>
<tr>
<th>Fiber</th>
<td class="per-100g">0g</td>
</tr>
<tr>
<th>Sugar</th>
<td class="per-100g">5.5g</td>
</tr>
<tr>
<th>Protein</th>
<td class="per-100g">5.3g</td>
</tr>
</table>
<table class="mobile per-50g composition">
<tr>
<th></th>
<th class="per-50g">Per Buttery(50G)</th>
</tr>
<tr>
<th>Calories</th>
<td class="per-50g">181</td>
</tr>
<tr>
<th>Fat</th>
<td class="per-50g">10.8g</td>
</tr>
<tr>
<th>Saturated</th>
<td class="per-50g">3.9g</td>
</tr>
<tr>
<th>Sodium</th>
<td class="per-50g">485.5mg</td>
</tr>
<tr>
<th>Carbohydrates</th>
<td class="per-50g">19.7g</td>
</tr>
<tr>
<th>Fiber</th>
<td class="per-50g">0g</td>
</tr>
<tr>
<th>Sugar</th>
<td class="per-50g">2.7g</td>
</tr>
<tr>
<th>Protein</th>
<td class="per-50g">2.6g</td>
</tr>
</table>
You could use some javascript to duplicate the table, if that suits your use case.
I would like to count class changed cells in each rows.
My desired result is like below.
are there any way to count?
Thanks
var $ = jQuery;
$('.click').on('click', function(e) {
e.preventDefault();
$(this).toggleClass('aqua')
})
td {
border: solid 1px black;
padding:5px;
}
table {
border-collapse: collapse;
}
.noborder {
border: none;
padding: 5px 8px;
}
.aqua {
background-color:aqua;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class=click>1</td>
<td class=click>2</td>
<td class=click>3</td>
<td class="noborder"></td>
<td></td>
</tr>
<tr>
<td class=click>4</td>
<td class=click>5</td>
<td class=click>6</td>
<td class="noborder"></td>
<td></td>
</tr>
<tr>
<td class=click>7</td>
<td class=click>8</td>
<td class=click>9</td>
<td class="noborder"></td>
<td></td>
</tr>
</table>
You could do a foreach in each tr and calculate the tds inside it that have the 'aqua' code:
var $ = jQuery;
$('.click').on('click', function(e) {
e.preventDefault();
$(this).toggleClass('aqua');
recalculate();
})
function recalculate() {
$('tr').each(function(index, tr) {
let result = $(tr).find('td.click.aqua').length;
$(tr).find('.result').text(result);
});
}
td {
border: solid 1px black;
padding:5px;
}
table {
border-collapse: collapse;
}
.noborder {
border: none;
padding: 5px 8px;
}
.aqua {
background-color:aqua;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class=click>1</td>
<td class=click>2</td>
<td class=click>3</td>
<td class="noborder"></td>
<td class="result">0</td>
</tr>
<tr>
<td class=click>4</td>
<td class=click>5</td>
<td class=click>6</td>
<td class="noborder"></td>
<td class="result">0</td>
</tr>
<tr>
<td class=click>7</td>
<td class=click>8</td>
<td class=click>9</td>
<td class="noborder"></td>
<td class="result">0</td>
</tr>
</table>
Are you just interested in counting the cells with class .aqua or the number of times a cell toggles?
//number of cells with `.aqua` class
$(this).siblings('.noborder').next().text( $(this).parent().find('.aqua').length );
var $ = jQuery;
$('.click').on('click', function(e) {
e.preventDefault();
$(this).toggleClass('aqua');
$(this).siblings('.noborder').next().text( $(this).parent().find('.aqua').length );
})
td {
border: solid 1px black;
padding:5px;
}
table {
border-collapse: collapse;
}
.noborder {
border: none;
padding: 5px 8px;
}
.aqua {
background-color:aqua;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class=click>1</td>
<td class=click>2</td>
<td class=click>3</td>
<td class="noborder"></td>
<td></td>
</tr>
<tr>
<td class=click>4</td>
<td class=click>5</td>
<td class=click>6</td>
<td class="noborder"></td>
<td></td>
</tr>
<tr>
<td class=click>7</td>
<td class=click>8</td>
<td class=click>9</td>
<td class="noborder"></td>
<td></td>
</tr>
</table>
To count the number of times the .aqua class toggles you would have to increment the previous value, zero if none.
//count the number of times `.aqua` toggles
$(this).siblings('.noborder').next().text( +$(this).parent().find('td:last').text() + 1 );
var $ = jQuery;
$('.click').on('click', function(e) {
e.preventDefault();
$(this).toggleClass('aqua');
$(this).siblings('.noborder').next().text( +$(this).parent().find('td:last').text() + 1 );
})
td {
border: solid 1px black;
padding:5px;
}
table {
border-collapse: collapse;
}
.noborder {
border: none;
padding: 5px 8px;
}
.aqua {
background-color:aqua;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class=click>1</td>
<td class=click>2</td>
<td class=click>3</td>
<td class="noborder"></td>
<td></td>
</tr>
<tr>
<td class=click>4</td>
<td class=click>5</td>
<td class=click>6</td>
<td class="noborder"></td>
<td></td>
</tr>
<tr>
<td class=click>7</td>
<td class=click>8</td>
<td class=click>9</td>
<td class="noborder"></td>
<td></td>
</tr>
</table>
I have the following html and would like to hide the collapsible table by default, only showing the top row. Which when clicked on, will pop out the rest of the table. Right now, it shows the whole table, only to hide once toggled.
<html>
<style>
table {
width: 300px;
border-collapse: collapse;
border-color: grey;
line-height: 1.7;
}
th {
background: #ffffff;
color: #000000;
font-weight: bold;
}
td, th {
border: 1px solid #ccc;
text-align: center;
font-size: 14px;
}
td {
color: #000000;
}
.labels tr td {
font-weight: bold;
color: #feb330;
}
.label tr td label {
display: block;
}
.bold {
font-weight: bold;
}
[data-toggle="toggle"] {
display: none;
}
</style>
<table>
<tbody class="labels">
<tr bgcolor="#ffffff">
<td colspan="3">
<label for="14Season">2014 Season: 19</label>
<input type="checkbox" name="14Season" id="14Season" data-toggle="toggle">
</tr>
</tbody>
<tbody class="hide">
<tr bgcolor="#264033">
<td class="bold" colspan="1" style="color:#ffffff">Date</td>
<td class="bold" colspan="1" style="color:#ffffff">Scorigami</td>
<td class="bold" colspan="1" style="color:#ffffff">Total</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">9/21/13</td>
<td style="color:#ffffff">0-6 L</td>
<td style="color:#ffffff">1</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">9/21/13</td>
<td style="color:#ffffff">8-10 L</td>
<td style="color:#ffffff">2</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">9/22/13</td>
<td style="color:#ffffff">10-8 W</td>
<td style="color:#ffffff">3</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">10/19/13</td>
<td style="color:#ffffff">3-2 W</td>
<td style="color:#ffffff">4</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">10/19/13</td>
<td style="color:#ffffff">1-4 L</td>
<td style="color:#ffffff">5</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">10/26/13</td>
<td style="color:#ffffff">7-0 W</td>
<td style="color:#ffffff">6</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">4/11/14</td>
<td style="color:#ffffff">7-2 W</td>
<td style="color:#ffffff">7</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">4/11/14</td>
<td style="color:#ffffff">7-1 W</td>
<td style="color:#ffffff">8</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">4/12/14</td>
<td style="color:#ffffff">13-6 W</td>
<td style="color:#ffffff">9</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">4/12/14</td>
<td style="color:#ffffff">10-2 W</td>
<td style="color:#ffffff">10</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">4/13/14</td>
<td style="color:#ffffff">12-0 W</td>
<td style="color:#ffffff">11</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">4/26/14</td>
<td style="color:#ffffff">8-2 W</td>
<td style="color:#ffffff">12</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">4/26/14</td>
<td style="color:#ffffff">7-5 W</td>
<td style="color:#ffffff">13</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">4/27/14</td>
<td style="color:#ffffff">9-1 W</td>
<td style="color:#ffffff">14</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">5/2/14</td>
<td style="color:#ffffff">10-0 W</td>
<td style="color:#ffffff">15</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">5/3/14</td>
<td style="color:#ffffff">4-2 W</td>
<td style="color:#ffffff">16</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">5/4/14</td>
<td style="color:#ffffff">10-4 W</td>
<td style="color:#ffffff">17</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">5/16/14</td>
<td style="color:#ffffff">1-2 L</td>
<td style="color:#ffffff">18</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">5/17/14</td>
<td style="color:#ffffff">7-12 L</td>
<td style="color:#ffffff">19</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('[data-toggle="toggle"]').change(function(){
$(this).parents().next('.hide').toggle();
});
});
</script>
</html>
I believe only a small change is required, but can't seem to get it right. Thanks for the help!
Adding
.hide {
display: none;
}
fixed the issue.
table {
display: none;
}
this should work. Also change,
[data-toggle="toggle"] {
display: block;
}
you can give to the table rows logical id's, then use a function to hide/show them
code to retrieve the table rows id's
var table = document.querySelector('table');
// listen for a click
table.addEventListener('click', function(ev){
// get the event targets ID
var serviceID = ev.target.id;
alert(serviceID);
})
I'm having a problem using a jQuery scrollTop() function with $.each. Every time, no matter how many <div class="panel"></div> elements are, scrollTop() function returns zero. I've used code in the Get height of multiple divs with jquery thread, only changed height() to scrollTop() function (height() still returns zero).
Here is the code that I've created, so it will be much easier to understand the problem.
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
var $panel = $('.panel'),
totalHeight = 0;
$.each($panel, function() {
totalHeight += $(this).scrollTop();
});
alert(totalHeight);
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active,
button.accordion:hover {
background-color: #ddd;
}
button.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "\2212";
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="accordion">Lėšų išsiėmimai</button>
<div class="panel">
<div>
</div>
<table>
<tbody>
<tr>
<th>Data</th>
<th>12 val.</th>
<th>0.01 Eur</th>
<th>Data</th>
<th>24 val.</th>
<th>0.02 Eur</th>
</tr>
<tr>
<td colspan="3"></td>
<td>2017-06-26 01:39:16</td>
<td colspan="2">+</td>
</tr>
<tr>
<td colspan="3"></td>
<td>2017-06-24 14:43:50</td>
<td colspan="2">+</td>
</tr>
<tr>
<td>2017-06-24 14:43:27</td>
<td colspan="2">+</td>
<td>2017-06-15 14:43:43</td>
<td colspan="2">+</td>
</tr>
<tr>
<td>2017-06-15 14:42:23</td>
<td colspan="2">+</td>
<td>2017-06-07 16:34:04</td>
<td colspan="2">+</td>
</tr>
<tr>
<td>2017-06-07 16:33:36</td>
<td colspan="2">+</td>
<td>1970-01-01 03:00:00</td>
<td colspan="2">+</td>
</tr>
<tr>
<td>2017-06-06 15:13:41</td>
<td colspan="2">+</td>
<td>1970-01-01 03:00:00</td>
<td colspan="2">+</td>
</tr>
<tr>
<td style="background: #0E82A7;">Iš viso</td>
<td style="background: #0E82A7;" colspan="2">0.0400 Eur</td>
<td style="background: #0E82A7;"></td>
<td style="background: #0E82A7;" colspan="2">0.1200 Eur</td>
</tr>
</tbody>
</table>
</div>
<div class="panel">
<div>
</div>
<table>
<tbody>
<tr>
<th>Data</th>
<th>12 val.</th>
<th>0.01 Eur</th>
<th>Data</th>
<th>24 val.</th>
<th>0.02 Eur</th>
</tr>
<tr>
<td colspan="3"></td>
<td>2017-06-26 01:39:16</td>
<td colspan="2">+</td>
</tr>
<tr>
<td colspan="3"></td>
<td>2017-06-24 14:43:50</td>
<td colspan="2">+</td>
</tr>
<tr>
<td>2017-06-24 14:43:27</td>
<td colspan="2">+</td>
<td>2017-06-15 14:43:43</td>
<td colspan="2">+</td>
</tr>
<tr>
<td>2017-06-15 14:42:23</td>
<td colspan="2">+</td>
<td>2017-06-07 16:34:04</td>
<td colspan="2">+</td>
</tr>
<tr>
<td>2017-06-07 16:33:36</td>
<td colspan="2">+</td>
<td>1970-01-01 03:00:00</td>
<td colspan="2">+</td>
</tr>
<tr>
<td>2017-06-06 15:13:41</td>
<td colspan="2">+</td>
<td>1970-01-01 03:00:00</td>
<td colspan="2">+</td>
</tr>
<tr>
<td style="background: #0E82A7;">Iš viso</td>
<td style="background: #0E82A7;" colspan="2">0.0400 Eur</td>
<td style="background: #0E82A7;"></td>
<td style="background: #0E82A7;" colspan="2">0.1200 Eur</td>
</tr>
</tbody>
</table>
</div>
Clearly height property will return 0 as your panels are set to
max-height:0;
When the code runs. Now, the function:
scrollTop()
Will check the scroll of window, what you are probably looking for is:
$(this).offset().top
Here is the fiddle: https://jsfiddle.net/08gccLph/
Hope that helps :)
I have created a HTML table and when I use overflow to make it sure it doesn't exceed a certain height the below div is placed in such a way that the text could still fit.
I need to the div to be placed directly below the scrolling table.
I am using overflow: hidden however I can still select the text, but I can't see it.
$('document').ready(function() {
var $table = $('#ingsNeededTable'),
$bodyCells = $table.find('tbody tr:first').children(),
colWidth;
$(window).resize(function() {
colWidth = $bodyCells.map(function() {
return $(this).width();
}).get();
$table.find('thead tr').children().each(function(i, v) {
$(v).width(colWidth[i] + 1);
});
}).resize();
var loop = setInterval(function() {
$("#ingsNeededTable tbody").animate({scrollTop: $("#ingsNeededTable tbody").prop("scrollHeight")}, 100000, "linear");
$("#ingsNeededTable tbody").animate({scrollTop: 0}, 100000, "linear");
}, 1);
});
#ingsNeededTableHolder {
height: 45%;
}
#ingsNeededTitle, #ingsRecentTitle {
text-align: center;
}
#ingsNeededTable {
border-collapse: collapse;
width: 100%;
}
#ingsNeededTable th, #ingsNeededTable td {
border-bottom: 1px solid black;
}
#ingsNeededTable thead {
display: block;
width: 100%;
}
#ingsNeededTable tbody {
display: block;
height: 40%;
overflow-y: hidden;
width: 100%;
}
.ingsNeededTableIng, .ingsNeededTableProd {
width: 40%;
}
.ingsNeededTableNeeded {
width: 10%
}
#ingsNeededTable tr:nth-child(even) {
background-color: #eaf2f1
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id='ingsNeededTableHolder'>
<table id='ingsNeededTable'>
<thead>
<tr>
<th class='ingsNeededTableIng'>Ingredient</th>
<th class='ingsNeededTableNeeded'>Needed (Kg)</th>
<th class='ingsNeededTableProd'>Product</th>
</tr>
</thead>
<tbody>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
</tbody>
</table>
</div>
<div>
<h2>This Should Be Below The Scrolling Table</h2>
</div>
The table is properly aligned on my page, but it isn't on the snippet for some reason.
Set max-height to #ingsNeededTableHolder
#ingsNeededTableHolder {
height: 45%;
max-height: 150px;
overflow: hidden;
}
$('document').ready(function() {
var $table = $('#ingsNeededTable'),
$bodyCells = $table.find('tbody tr:first').children(),
colWidth;
$(window).resize(function() {
colWidth = $bodyCells.map(function() {
return $(this).width();
}).get();
$table.find('thead tr').children().each(function(i, v) {
$(v).width(colWidth[i] + 1);
});
}).resize();
var loop = setInterval(function() {
$("#ingsNeededTable tbody").animate({scrollTop: $("#ingsNeededTable tbody").prop("scrollHeight")}, 100000, "linear");
$("#ingsNeededTable tbody").animate({scrollTop: 0}, 100000, "linear");
}, 1);
});
#ingsNeededTableHolder {
height: 45%;
max-height: 150px;
overflow: hidden;
}
#ingsNeededTitle, #ingsRecentTitle {
text-align: center;
}
#ingsNeededTable {
border-collapse: collapse;
width: 100%;
}
#ingsNeededTable th, #ingsNeededTable td {
border-bottom: 1px solid black;
}
#ingsNeededTable thead {
display: block;
width: 100%;
}
#ingsNeededTable tbody {
display: block;
height: 40%;
overflow-y: hidden;
width: 100%;
}
.ingsNeededTableIng, .ingsNeededTableProd {
width: 40%;
}
.ingsNeededTableNeeded {
width: 10%
}
#ingsNeededTable tr:nth-child(even) {
background-color: #eaf2f1
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id='ingsNeededTableHolder'>
<table id='ingsNeededTable'>
<thead>
<tr>
<th class='ingsNeededTableIng'>Ingredient</th>
<th class='ingsNeededTableNeeded'>Needed (Kg)</th>
<th class='ingsNeededTableProd'>Product</th>
</tr>
</thead>
<tbody>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
</tbody>
</table>
</div>
<div>
<h2>This Should Be Below The Scrolling Table</h2>
</div>