How to convert text into a clickable button link - javascript

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.

Related

javascript css change color of tablerow

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

How to calculate the difference of two values in a <td> tag in another <td> tag in HTML

I have a table in HTML which is rendered and it is like,
{% for element in combined_list %}
<td id='first'>element.first</td>
<td id='second'>element.second</td>
<td id='diff>I want the difference of first and second here</td>
{% endfor %}
I tried with jQuery also like:
jQuery(document).ready(function($) {
let first_= jQuery('#first','/^[0-9]*$/' ).text();
let second_ = jQuery('#second').html();
let diff = first_- second_ ;
$('#diff').html(diff)
});
But Im getting for only one column. Thanks in advance.
You can't have multiple column with the same id, use class instead
$(document).ready(function(){
var rows = document.getElementById("table").getElementsByTagName("tr");
for(var i = 0; i < rows.length; i++)
{
var first = parseInt(rows[i].getElementsByClassName("first")[0].textContent);
var second = parseInt(rows[i].getElementsByClassName("second")[0].textContent);
var diff = first - second;
console.log("First: "+first+" - second : "+second+" = "+diff);
rows[i].getElementsByClassName("diff")[0].textContent = diff;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='table'>
<tr>
<td class='first'>5</td>
<td class='second'>4</td>
<td class='diff'>diffhere</td>
</tr>
<tr>
<td class='first'>9</td>
<td class='second'>3</td>
<td class='diff'>diffhere</td>
</tr>
</table>
You have a typo in the second id - missing quote
IDs need to be unique so use instead a class and you can loop over all the first columns
you can use relative addressing via .next and/or .closest to get the other columns
$(function() {
$("#tb .first").each(function() {
const val1 = +$(this).text();
const val2 = +$(this).next().text();
$(this).closest("tr").find(".diff").text(val1 - val2);
})
})
td {
border: 1px solid black;
padding: 3px;
text-align: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>1st</th>
<th>2nd</th>
<th>Diff</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td class="first">11</td>
<td class="second">9</td>
<td class="diff"></td>
</tr>
<tr>
<td class="first">12</td>
<td class="second">8</td>
<td class="diff"></td>
</tr>
<tr>
<td class="first">13</td>
<td class="second">7</td>
<td class="diff"></td>
</tr>
<tr>
<td class="first">14</td>
<td class="second">6</td>
<td class="diff"></td>
</tr>
<tr>
<td class="first">15</td>
<td class="second">5</td>
<td class="diff"></td>
</tr>
</tbody>
</table>
Plain JS
window.addEventListener('load', function() {
[...document.querySelectorAll('#tb .first')].forEach(cell => {
const parent = cell.closest('tr');
const val1 = +cell.textContent;
const val2 = +parent.querySelector('.second').textContent;
parent.querySelector('.diff').textContent = val1 - val2;
})
})
td {
border: 1px solid black;
padding: 3px;
text-align: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>1st</th>
<th>2nd</th>
<th>Diff</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td class="first">11</td>
<td class="second">9</td>
<td class="diff"></td>
</tr>
<tr>
<td class="first">12</td>
<td class="second">8</td>
<td class="diff"></td>
</tr>
<tr>
<td class="first">13</td>
<td class="second">7</td>
<td class="diff"></td>
</tr>
<tr>
<td class="first">14</td>
<td class="second">6</td>
<td class="diff"></td>
</tr>
<tr>
<td class="first">15</td>
<td class="second">5</td>
<td class="diff"></td>
</tr>
</tbody>
</table>

How to Hide a Collapsible table (except for top row) by default

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);
})

Creating a calendar in HTML

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.

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