I'm currently creating a calendar in HTML as part of a school project.
So far I've created the basics of the page. What I'd like is a calendar, where you're able to create appointments, which will then show up (like a basic calendar).
Here is what I've made so far (It's is danish, but I don't think it should be a problem. Let me know if you'd like it translated though):
HTML:
<html>
<head>
<title>December</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="javascript.js"></script>
</head>
<body>
<div class="navigation">
<div id="forrige">
Forrige måned
</div>
<div id="naeste">
Næste måned
</div>
</div>
<br><br>
<table class="ugedage">
<tr>
<th>Mandag</th>
<th>Tirsdag</th>
<th>Onsdag</th>
<th>Torsdag</th>
<th>Fredag</th>
<th>Lørdag</th>
<th>Søndag</th>
</tr>
<tr>
<td class="grayedout" data-href="#"><p>28</p></td>
<td class="grayedout" data-href="#"><p>29</p></td>
<td class="grayedout" data-href="#"><p>30</p></td>
<td class="dato" data-href="#">1</td>
<td class="dato" data-href="#">2</td>
<td class="dato" data-href="#">3</td>
<td class="dato" data-href="#">4</td>
</tr>
<tr>
<td class="dato" data-href="#">5</td>
<td class="dato" data-href="#">6</td>
<td class="dato" data-href="#">7</td>
<td class="dato" data-href="#">8</td>
<td class="dato" data-href="#">9</td>
<td class="dato" data-href="#">10</td>
<td class="dato" data-href="#">11</td>
</tr>
<tr>
<td class="dato" data-href="#">12</td>
<td class="dato" data-href="#">13</td>
<td class="dato" data-href="#">14</td>
<td class="dato" data-href="#">15</td>
<td class="dato" data-href="#">16</td>
<td class="dato" data-href="#">17</td>
<td class="dato" data-href="#">18</td>
</tr>
<tr>
<td class="dato" data-href="#">19</td>
<td class="dato" data-href="#">20</td>
<td class="dato" data-href="#">21</td>
<td class="dato" data-href="#">22</td>
<td class="dato" data-href="#">23</td>
<td class="dato" data-href="#">24</td>
<td class="dato" data-href="#">25</td>
</tr>
<tr>
<td class="dato" data-href="#">26</td>
<td class="dato" data-href="#">27</td>
<td class="dato" data-href="#">28</td>
<td class="dato" data-href="#">29</td>
<td class="dato" data-href="#">30</td>
<td class="dato" data-href="#">31</td>
<td class="grayedout" data-href="#"><p>1</p></td>
</tr>
<tr>
<td class="grayedout" data-href="#"><p>2</p></td>
<td class="grayedout" data-href="#"><p>3</p></td>
<td class="grayedout" data-href="#"><p>4</p></td>
<td class="grayedout" data-href="#"><p>5</p></td>
<td class="grayedout" data-href="#"><p>6</p></td>
<td class="grayedout" data-href="#"><p>7</p></td>
<td class="grayedout" data-href="#"><p>8</p></td>
</tr>
</table>
</body>
</html>
CSS:
.ugedage {
width: 95%;
margin-left: 2.5%;
margin-right: 2.5%;
}
.ugedage th {
border: 1px solid;
padding: 20px;
border-radius: 4px;
}
.ugedage td {
border: 1px solid;
border-radius: 4px;
padding: 20px;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 10px;
text-align: right;
}
.grayedout {
background-color: #d3d3d3;
font-size: 12;
}
.dato {
color: black;
font-size: 12;
text-decoration: none;
}
td a {
display:block;
width:100%;
height: 100%;
}
.grayedout p {
color: gray;
font-size: 12;
text-decoration: none;
}
#forrige {
float: left;
margin-left: 1%;
}
#naeste {
float: right;
margin-right: 1%;
}
table td[data-href] {
cursor: pointer;
}
The small Javascript (I haven't learned Java yet, this was something I've found online):
$(document).ready(function(){
$('table td').click(function(){
window.location = $(this).data('href');
return false;
});
});
So far I've only created a calendar for the current month and the following 2, since I'm doing them manually (if you know how to automate this process I'd like to know as well, but it's not the most important thing).
The thing I'd like is, when I click one of the <td> 's, that represent the days, a popup window, or something like that, appears, where I'm able to type in the details of the appointment I want to add.
How could/should I do this? From my understanding, it'd be difficult/impossible to do in HTML purely, which is where my problem is; I don't know anything else than basic HTML and PHP, and have never worked with Javascript, so I'm in a bit of a tough spot.
Let me know if you need any additional information, and I'll be glad to give you whatever I can.
Thanks :-)
I've coded up the code you need in jQuery.
let row = $('tr');
row.each((index,row) =>{ // For each row
if(index !== 0) return; // We only want 1 entry of!
$('td').each((index,day) => { // For each day
if($(day).hasClass('grayedout')) return; // Skip grayed out days
$(day).on('click',addApointment); // The part we care about
});
})
function addApointment() {
let dayNum = $(this).text();
let appointment =
prompt(`What would you like to add for an appointment for the ${dayNum}th?`);
}
JSFindle
dayNum returns the day number that was clicked on and appointment returns what the user wish to add for his appointment. You can use that in your PHP, Good luck.
Related
I pulled data from a table from the Google API and I can show all the information from it. Now, I want to take specific columns that come in the form of text but are actually linked and turn those links into a clickable button.
I can style these elements through CSS, I made an example of nth-child, however, when I try to apply a function, nothing happens.
My code is here:
function convertYoutube() {
const elements = document.querySelectorAll(".text-line:nth-child(8n)");
const exp1 = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/ig;
const exp2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
elements.forEach(element => {
let youtube = element.textContent;
youtube = youtube.replace(exp1, "<a href='$1'>$1</a>");
youtube = youtube.replace(exp2, '$1<a target="_blank" href="http://2">$2</a>');
element.innerHTML = youtube;
});
}
convertYoutube();
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
.text-line:nth-child(8n) {
color: red;
}
a.btn_link {
display: flex;
justify-content: center;
align-items: center;
width: 120px;
height: 10px;
padding: 20px;
background: red;
color: white;
text-decoration: none;
font-size: 16px;
}
<table>
<tbody class="content_ecj" id="table-body-1">
<tr class="line_table">
<td class="text-line">Title 01</td>
<td class="text-line">Title 02</td>
<td class="text-line">Title 03</td>
<td class="text-line">Title 04</td>
<td class="text-line">Title 05</td>
<td class="text-line">Tilte 06</td>
<td class="text-line">Title 07</td>
<td class="text-line">Title 08</td>
</tr>
<tr class="line_table">
<td class="text-line">Lorem Ipsum</td>
<td class="text-line">Em andamento</td>
<td class="text-line">-</td>
<td class="text-line">-</td>
<td class="text-line">-</td>
<td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM</td>
<td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM</td>
<td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM</td>
</tr>
<tr class="line_table">
<td class="text-line">Lorem Ipsum</td>
<td class="text-line">Em andamento</td>
<td class="text-line">20</td>
<td class="text-line">encerradas</td>
<td class="text-line">realizada</td>
<td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM</td>
<td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM</td>
<td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM/</td>
</tr>
<tr class="line_table">
<td class="text-line">Lorem Ipsum</td>
<td class="text-line">Em andamento</td>
<td class="text-line">a definir </td>
<td class="text-line"></td>
<td class="text-line"></td>
<td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM</td>
<td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM/</td>
<td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM/</td>
</tr>
<tr class="line_table">
<td class="text-line">Lorem Ipsum</td>
<td class="text-line">Em andamento</td>
<td class="text-line">11</td>
<td class="text-line">encerradas</td>
<td class="text-line">realizada</td>
<td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM</td>
<td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM</td>
<td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM/</td>
</tr>
<tr class="line_table">
<td class="text-line">Lorem Ipsum</td>
<td class="text-line">Em andamento</td>
<td class="text-line"></td>
<td class="text-line"></td>
<td class="text-line"></td>
<td class="text-line"><a class="btn_link" href="https://www.youtube.com/watch?v=jDpVRarF9UM">Veja Mais</a></td>
<td class="text-line"><a class="btn_link" href="https://www.youtube.com/watch?v=jDpVRarF9UM">Veja Mais</a></td>
<td class="text-line"><a class="btn_link" href="https://www.youtube.com/watch?v=jDpVRarF9UM">Veja Mais</a></td>
</tr>
</tbody>
</table>
I tried styling and formatting data coming from an API. For this, I applied a regex to separate and convert this information by creating a button that must be clickable and lead to the link inserted in each column.
assuming you want to run after building the table (and not during)
Perhaps something like this:
function linkCreator(el){
var a = document.createElement('a');
var linkText = document.createTextNode(el.innerText); // this text will be shown to the user. perhaps replace with the video's title
a.appendChild(linkText);
a.classList.add("btn_link")
a.href = el.innerText; // actual link
return a;
}
[...document.querySelectorAll("td.text-line:nth-child(8n)")].slice(1,).forEach(x=> x.replaceChildren(linkCreator(x))) //select relevant `td`s, ignore the first one (Title 8).
This is what it looks like:
function linkCreator(el) {
var a = document.createElement('a');
var linkText = document.createTextNode(el.innerText);
a.appendChild(linkText);
a.href = el.innerText;
a.classList.add("btn_link")
return a;
}
[...document.querySelectorAll("td.text-line:nth-child(8n)")].slice(1, ).forEach(x => x.replaceChildren(linkCreator(x)))
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
.text-line:nth-child(8n) {
color: red;
}
a.btn_link {
display: flex;
justify-content: center;
align-items: center;
width: 120px;
height: 10px;
padding: 20px;
background: red;
color: white;
text-decoration: none;
font-size: 16px;
}
<table>
<tbody class="content_ecj" id="table-body-1">
<tr class="line_table">
<td class="text-line">Title 01</td>
<td class="text-line">Title 02</td>
<td class="text-line">Title 03</td>
<td class="text-line">Title 04</td>
<td class="text-line">Title 05</td>
<td class="text-line">Tilte 06</td>
<td class="text-line">Title 07</td>
<td class="text-line">Title 08</td>
</tr>
<tr class="line_table">
<td class="text-line">Lorem Ipsum</td>
<td class="text-line">Em andamento</td>
<td class="text-line">-</td>
<td class="text-line">-</td>
<td class="text-line">-</td>
<td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM</td>
<td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM</td>
<td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM</td>
</tr>
<tr class="line_table">
<td class="text-line">Lorem Ipsum</td>
<td class="text-line">Em andamento</td>
<td class="text-line">20</td>
<td class="text-line">encerradas</td>
<td class="text-line">realizada</td>
<td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM</td>
<td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM</td>
<td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM/</td>
</tr>
<tr class="line_table">
<td class="text-line">Lorem Ipsum</td>
<td class="text-line">Em andamento</td>
<td class="text-line">a definir </td>
<td class="text-line"></td>
<td class="text-line"></td>
<td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM</td>
<td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM/</td>
<td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM/</td>
</tr>
<tr class="line_table">
<td class="text-line">Lorem Ipsum</td>
<td class="text-line">Em andamento</td>
<td class="text-line">11</td>
<td class="text-line">encerradas</td>
<td class="text-line">realizada</td>
<td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM</td>
<td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM</td>
<td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM/</td>
</tr>
</tbody>
</table>
This JavaScript code selects all elements with the class text-line that are the 8th child of their parent and applies the convertYoutube function to them.
The function uses two regular expressions to match the text content of each selected element against a URL pattern. The exp1 expression matches URLs that start with http://, https://, ftp://, or file://. The exp2 expression matches URLs that start with www..
The function replaces the matching text with an anchor tag that has a corresponding href attribute. The exp1 match result has the link target set to the matched URL, while the exp2 match result has the link target set to http:// plus the matched URL. The result of each match is then set as the innerHTML of the selected element, effectively converting the plain text into a clickable link.
Please note that the code provided only replaces plain text with clickable links. If the text is already within an HTML element, such as a div or span, the code might not work as expected.
The function replaces the matching text with an anchor tag that has a corresponding href attribute. The exp1 match result has the link target set to the matched URL, while the exp2 match result has the link target set to http:// plus the matched URL.
The function then sets the result of each match as the innerHTML of the selected element, effectively converting the plain text into a clickable link.
It's possible that nothing is happening when you try to apply the function because the elements with the class text-line may not exist yet in the DOM at the time the function is called. You might need to wrap the function call in a window.onload event or use a more modern method such as addEventListener to make sure the elements are available when the function is called.
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
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'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 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.