javascript css change color of tablerow - javascript

This table is supposed the change the color of the table rows as you click them. The color has to change to a background color of black with a white font.
With javaScript the color is changed when you click a row. Only the most left td with class='podia' doesn't change to the black background color.
I tried a lot of things but nothing seems to work and I'm probably missing the knowledge here. Does someone here know how I can solve this?
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
<style>
/* table of festival program */
#programmering {
border-collapse: separate;
border-color: transparent;
border-spacing: 3px;
width: 100%;
}
/* style of header */
.table-header {
font-weight: bold;
background-color: #5f9ea0;
text-align: left;
color: white;
border-color: transparent;
}
/* padding td's */
td {
padding: 5px;
}
/* background-color of table */
.table-body{
background-color: #b0c4de;
}
/* style of the most left column */
.podia {
background-color: #5f9ea0;
text-align: right;
color: white;
}
/* Style of selected-row */
.selected-row {
color: white;
background-color: black;
}
</style>
</head>
<body>
<table id="programmering">
<thead class="table-header">
<tr>
<td colspan="2"></td>
<td colspan="2">13:00</td>
<td colspan="2">14:00</td>
<td colspan="2">15:00</td>
<td colspan="2">16:00</td>
<td colspan="2">17:00</td>
<td colspan="2">18:00</td>
<td colspan="2">19:00</td>
<td colspan="2">20:00</td>
<td colspan="2">21:00</td>
<td colspan="2">22:00</td>
<td colspan="2">23:00</td>
<td colspan="2">24:00</td>
</tr>
</thead>
<tbody class="table-body">
<tr>
<td class="podia" colspan="2">Mainstage:</td>
<td colspan="3">Kraantje Pappie</td>
<td colspan="4">The Krooks</td>
<td colspan="4">Krezip</td>
<td colspan="5">Lenny Kravits</td>
<td colspan="6">The Cure</td>
<td colspan="2">Armin van Buuren</td>
</tr>
<tr>
<td class="podia" colspan="2">IBA Parkstad:</td>
<td colspan="2"></td>
<td colspan="4">White Lies</td>
<td colspan="4">Rowwen Heze</td>
<td colspan="4">J Balvin</td>
<td colspan="4">Die Antwoord</td>
<td colspan="6"></td>
</tr>
<tr>
<td class="podia" colspan="2">Brightlands:</td>
<td colspan="2"></td>
<td colspan="4">Blood Red Shoes</td>
<td colspan="4">Jack Savoretti</td>
<td colspan="4">Miles Kane</td>
<td colspan="4">Mark Rondson</td>
<td colspan="6"></td>
</tr>
<tr>
<td class="podia" colspan="2">Stage 4:</td>
<td colspan="3">Au/ra</td>
<td colspan="3">Confidance Man</td>
<td colspan="2">Nana Adjoa</td>
<td colspan="4">Barns Courtny</td>
<td colspan="4">Boef</td>
<td colspan="8"></td>
</tr>
</tbody>
</table>
<script>
let table = document.getElementById("programmering");
let rows = document.getElementsByTagName("tr");
for(let i = 1; i < rows.length; i++) {
let currentRow = table.rows[i];
currentRow.addEventListener('click', function() {
Array.from(this.parentElement.children).forEach(function(elem){
elem.classList.remove('selected-row');
});
// [...this.parentElement.children].forEach((el) => el.classList.remove('selected-row'));
this.classList.add('selected-row');
console.log(currentRow)
})
}
</script>
</body>
</html>


This is because you have already styled the cell with the podia class.
To style all table cells you need to replace in your styles:
.selected-row
on the
.selected-row td

Related

Stop table row height from filling whole table body

I have a table, when I add a row to it, the row's height will fill the whole body of the table. I want to force the height to only be around 10% of the tables body height, and let the rest of the tabe body to be empty. I've tried adding a height propery of 10% to the tbody tr selector but nothing happens. My goal is to have a row take up about 10% of the open area, and then when I click add row, another one will appear under it until the whole table body is full of rows.
Here is my code
#home-index {
margin-top: 10px;
}
tbody {
height: 604px;
}
td {
border: 1px solid lightgray;
}
.hours-cell:hover {
background-color: darkorange;
}
tr {
border: 1px solid lightgray;
}
th {
border: 1px solid lightgray;
}
.dropdown {
width: 25%
}
<table>
<thead>
<tr>
<th>Project</th>
<th>Task</th>
<th>7/11</th>
<th>7/12</th>
<th>7/13</th>
<th>Total Hours</th>
</tr>
</thead>
<tbody>
<tr>
<td class="dropdown">
<select asp-for="Project" asp-items="Model.Projects"></select>
</td>
<td class="dropdown">
<select asp-for="Task"></select>
</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Overall Totals</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td></td>
</tr>
<tr>
<td colspan="2">Over/Under</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td></td>
</tr>
</tfoot>
</table>

I hope this helps your problem. I added an empty <tr> at the very end of the body with a different class. You can style this row however you like to make it look like an empty body. Any rows you add should be added above this one.
#home-index {
margin-top: 10px;
}
tbody {
height: 604px;
}
td {
border: 1px solid lightgray;
}
.hours-cell:hover {
background-color: darkorange;
}
tr {
border: 1px solid lightgray;
}
th {
border: 1px solid lightgray;
}
.dropdown {
width: 25%
}
tbody tr {
height: 10%
}
.extra {
height: 100%
}
<table>
<thead>
<tr>
<th>Project</th>
<th>Task</th>
<th>7/11</th>
<th>7/12</th>
<th>7/13</th>
<th>Total Hours</th>
</tr>
</thead>
<tbody>
<tr>
<td class="dropdown">
<select asp-for="Project" asp-items="Model.Projects"></select>
</td>
<td class="dropdown">
<select asp-for="Task"></select>
</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td></td>
</tr>
<tr class="extra">
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Overall Totals</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td></td>
</tr>
<tr>
<td colspan="2">Over/Under</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td></td>
</tr>
</tfoot>
</table>

Adjust the layout of table when in mobile view

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.

How to count class change within rows in html tables

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>

Using jQuery each, scrollTop() returns zero

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 :)

How to add nested numbering on html table (1.1 , 1.2)?

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.

Categories

Resources