Create a basic table with expanded row - javascript

I'm using Angular version 6 and want either an Angular solution or pure html/javascript solution for having a table with expanded rows.
So when you click a row it expands.
Note: I don't want to use angular material, jQuery or any third party.
This is my html table:
<table class="ex-table p3">
<thead class="ex-table__head">
<tr class="ex-table__row">
<th class="ex-table__cell">id</th>
<th class="ex-table__cell">First Name</th>
</tr>
</thead>
<tbody>
<tr class="ex-table__row" *ngFor="let item of data">
<td class="ex-table__cell">
{{item.od}}
</td>
<td class="ex-table__cell">
{{item.firstName}}
</td>
</tr>
</tbody>
</table>
I've attempted rowspan and colspan and nested tables but could'nt get that working.

Do you want something like below? . the rows can be expanded. even the whole table can be expanded at once.
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script type="text/javascript">
function toggle(btnID, eIDs) {
// Feed the list of ids as a selector
var theRows = document.querySelectorAll(eIDs);
// Get the button that triggered this
var theButton = document.getElementById(btnID);
// If the button is not expanded...
console.log(theButton.getAttribute("aria-expanded"))
if (theButton.getAttribute("aria-expanded") == "false") {
// Loop through the rows and show them
for (var i = 0; i < theRows.length; i++) {
theRows[i].classList.add("shown");
theRows[i].classList.remove("hidden");
}
// Now set the button to expanded
theButton.setAttribute("aria-expanded", "true");
// Otherwise button is not expanded...
} else {
// Loop through the rows and hide them
for (var i = 0; i < theRows.length; i++) {
theRows[i].classList.add("hidden");
theRows[i].classList.remove("shown");
}
// Now set the button to collapsed
theButton.setAttribute("aria-expanded", "false");
}
}
function toggle1(btnID, eIDs) {
// Feed the list of ids as a selector
var theRows = document.querySelectorAll(eIDs);
// Get the button that triggered this
var theButton = document.getElementById(btnID);
// If the button is not expanded...
if (theButton.getAttribute("aria-expanded") == "false") {
// Loop through the rows and show them
for (var i = 0; i < theRows.length; i++) {
theRows[i].classList.add("shown");
theRows[i].classList.remove("hidden");
}
// Now set the button to expanded
theButton.setAttribute("aria-expanded", "true");
document.getElementById("btnMSb1").setAttribute("aria-expanded", "true");
document.getElementById("btnMSb2").setAttribute("aria-expanded", "true");
document.getElementById("btnMSb3").setAttribute("aria-expanded", "true");
// Otherwise button is not expanded...
} else {
// Loop through the rows and hide them
for (var i = 0; i < theRows.length; i++) {
theRows[i].classList.add("hidden");
theRows[i].classList.remove("shown");
}
// Now set the button to collapsed
theButton.setAttribute("aria-expanded", "false");
document.getElementById("btnMSb1").setAttribute("aria-expanded", "false");
document.getElementById("btnMSb2").setAttribute("aria-expanded", "false");
document.getElementById("btnMSb3").setAttribute("aria-expanded", "false");
}
}
</script>
</head>
<style>
body {
font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
line-height: 1.4;
background: #fefefe;
color: #333;
margin: 0 1em;
}
table {
width: 100%;
margin: 1em 0;
border-collapse: collapse;
}
caption {
text-align: left;
font-style: italic;
padding: 0.25em 0.5em 0.5em 0.5em;
}
th,
td {
padding: 0.25em 0.5em 0.25em 1em;
vertical-align: text-top;
text-align: left;
text-indent: -0.5em;
}
th {
vertical-align: bottom;
background-color: rgba(0, 0, 0, 0.75);
color: #fff;
font-weight: bold;
}
.process {
margin-top: 35px;
display: inline-block;
width: 10%;
padding: 5px;
border-top: 3px solid black;
border-bottom: 3px solid black;
color: #fff;
font-style: normal;
font-weight: bold;
}
.row td:nth-of-type(2),
.cell td:nth-of-type(3) {
font-style: italic;
}
.row th:nth-of-type(3),
.row td:nth-of-type(3),
.cell th:nth-of-type(4),
.cell td:nth-of-type(4) {
text-align: right;
}
td[colspan] {
background-color: #f5f5f5;
color: #000;
font-weight: normal;
font-style: italic;
padding: 0;
text-indent: 0;
}
tr.shown,
tr.hidden {
display: table-row;
}
tr.hidden {
display: none;
}
.row button {
background-color: transparent;
border: .1em solid transparent;
font: inherit;
padding: 0.25em 0.5em 0.25em .25em;
width: 100%;
text-align: left;
}
.row button:focus,
.row button:hover {
background-color: #ddd;
outline: .2em solid #00f;
}
.row button svg {
width: .8em;
height: .8em;
margin: 0 0 -.05em 0;
fill: #66f;
transition: transform 0.25s ease-in;
transform-origin: center 45%;
}
.row button:hover svg,
.row button:focus svg {
fill: #00c;
}
/* Lean on programmatic state for styling */
.row button[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.cell button {
font-size: 60%;
color: #000;
background-color: #00f;
padding: 0.3em 0.2em 0 0.2em;
border: 0.2em solid #00f;
border-radius: 50%;
line-height: 1;
text-align: center;
text-indent: 0;
transform: rotate(270deg);
}
.cell button svg {
width: 1.25em;
height: 1.25em;
fill: #fff;
transition: transform 0.25s ease-in;
transform-origin: center 45%;
}
.cell button:hover,
.cell button:focus {
background-color: #fff;
outline: none;
}
.cell button:hover svg,
.cell button:focus svg {
fill: #00f;
}
/* Lean on programmatic state for styling */
.cell button[aria-expanded="true"] svg {
transform: rotate(90deg);
}
/* Proven method to visually hide something but */
/* still make it available to assistive technology */
.visually-hidden {
position: absolute;
top: auto;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
/* IE 6/7 */
clip: rect(1px, 1px, 1px, 1px);
width: 1px;
height: 1px;
white-space: nowrap;
}
</style>
<table class="cell">
<caption>Dashboard</caption>
<thead>
<tr>
<th><button type="button" id="btnMSb" aria-expanded="false" onclick="toggle1(this.id,'#MS01b,#MS02b,#MS03b');" aria-controls="MS01b MS02b MS03b" aria-label="3 more from" aria-labelledby="btnMSb lblMSb">
<svg xmlns="\http://www.w3.org/2000/svg"" viewBox="0 0 80 80" focusable="false"><path d="M70.3 13.8L40 66.3 9.7 13.8z"></path></svg>
</button></th>
<th>Batch</th>
<th>Status</th>
<th>Start</th>
<th>End</th>
<th>agreed</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<button type="button" id="btnMSb1" aria-expanded="false" onclick="toggle(this.id,'#MS01b');" aria-controls="MS01b" aria-label="3 more from" aria-labelledby="btnMSb1 lblMSb1">
<svg xmlns="\http://www.w3.org/2000/svg"" viewBox="0 0 80 80" focusable="false"><path d="M70.3 13.8L40 66.3 9.7 13.8z"></path></svg>
</button>
</td>
<td>Batch1</td>
<td>Green</td>
<td>10AM</td>
<td>11AM</td>
<td>11:30AM</td>
</tr>
<tr id="MS01b" class="hidden">
<td></td>
<td colspan="5">
<div style="vertical-align: middle; text-align: center;height: 100px;">
<div class='process' style="border-right-style: none;border-left: 3px solid black; background-color: #16a085">Step1</div>
<div class='process' style="color:#222; margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #F1A9A9">Step2</div>
<div class='process' style="color:#222; margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #E4FFAE">Step3</div>
<div class='process' style="color:#222; margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #BFC6B9">Step4</div>
<div class='process' style="color:#222; margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #87FEF8">Step5</div>
<div class='process' style="color:#222; margin-left:-5px ; border-right: 3px solid black;border-left-style: none; background-color: #FF9A9E">Step6</div>
</div>
</td>
</tr>
<tr>
<td>
<button type="button" id="btnMSb2" aria-expanded="false" onclick="toggle(this.id,'#MS02b');" aria-controls="MS02b" aria-label="3 more from" aria-labelledby="btnMSb2 lblMSb2">
<svg xmlns="\http://www.w3.org/2000/svg"" viewBox="0 0 80 80" focusable="false"><path d="M70.3 13.8L40 66.3 9.7 13.8z"></path></svg>
</button>
</td>
<td>Batch2</td>
<td>Green</td>
<td>2AM</td>
<td>4AM</td>
<td>5AM</td>
</tr>
<tr id="MS02b" class="hidden">
<td></td>
<td colspan="5">
<div style="vertical-align: middle; text-align: center;height: 100px;">
<div class='process' style="border-right-style: none;border-left: 3px solid black; background-color: #16a085">Step1</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #DB2929">Step2</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #C0FF3E">Step3</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #5A6351">Step4</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #01C5BB">Step5</div>
<div class='process' style="color:#222; margin-left:-5px ; border-right: 3px solid black;border-left-style: none; background-color: #FF9A9E">Step6</div>
</div>
</td>
</tr>
<tr>
<td>
<button type="button" id="btnMSb3" aria-expanded="false" onclick="toggle(this.id,'#MS03b');" aria-controls="MS03b" aria-label="3 more from" aria-labelledby="btnMSb3 lblMSb3">
<svg xmlns="\http://www.w3.org/2000/svg"" viewBox="0 0 80 80" focusable="false"><path d="M70.3 13.8L40 66.3 9.7 13.8z"></path></svg>
</button>
</td>
<td>Batch3</td>
<td>Amber</td>
<td>10AM</td>
<td>11AM</td>
<td>10:30AM</td>
</tr>
<tr id="MS03b" class="hidden">
<td></td>
<td colspan="5">
<div style="vertical-align: middle; text-align: center;height: 100px;">
<div class='process' style="border-right-style: none;border-left: 3px solid black; background-color: #1abc9c">Step1</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #3498db">Step2</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #34495e">Step3</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #2ecc71">Step4</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #9b59b6">Step5</div>
<div class='process' style="margin-left:-5px ; border-right: 3px solid black;border-left-style: none; background-color: #e74c3c">Step6</div>
</div>
</td>
</tr>
</tbody>
</table>
</html>

Related

Click for Dropdown not working when generated in a loop

I have a table that is populated from a database with a dropdown menu that is populated along side the table which is generated from code in the php. Im tying to use javascript and css to make each drop down open on click but I cannot seem to get it to work. I've included the code below. I initilly had the script working but it only worked on the first instance of the dropdown. I reviewed a similar post to what Im looking to do but it was to no avail.
CSS
background-color: #04AA6D;
color: white;
padding: 5px;
font-size: 12px;
border: none;
text-transform: uppercase;
}
.yardDropbtn i{
font-size: 12px;
top: 1px;
position: relative;
}
.yardDropdown{
position: relative;
display: inline-block;
}
.yard-dropdown-content{
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
right: 0;
}
.yard-dropdown-content a{
color: black;
padding: 5px 16px;
text-decoration: none;
display: block;
}
.yard-dropdown-content a:hover {
background-color: #ddd;
}
.yardDropBtnCt {
display: none;
background-color: #f1f1f1;
color: black;
/*margin-left: 5px;*/
border: 1px;
display: block;
width: 100%;
height: 30px;
font-size: 15px;
text-transform: uppercase;
font-size: 12px;
}
.yardDropBtnCt:hover {
background-color: #ddd;
}
.trackBtn{
display: none;
background-color: #f1f1f1;
color: black;
margin-left: 5px;
border: 1px;
display: block;
width: 100%;
height: 30px;
font-size: 15px;
}
.trackBtn:hover{
background-color: #ddd;
}
/*.yard-dropdown-content:hover{
background-color: #ddd;
}*/
.show_yard_Dropdown .yard-dropdown-content {
display: block;
}
.show_yard_Dropdown .yardDropbtn {
background-color: #3e8e41;
}
JavaScript
var dropDownDivY = document.querySelector(".yardDropdown");
/*dropDownButton.addEventListener("click", function(){
dropDownDivY.classList.toggle('show_yard_Dropdown');
});*/
dropDownButton.forEach(btn => {
btn.onclick = function() {
dropDownDivY.style.display = "block";
}
});
HTML
<tr>
<td width='50px' class='yard8'>6400'</td>
<td width='100px' class='yard8 track'>Receiving 1</td>
<td width='150px' class='yard8'></td>
<td width='150px' class='yard8'>
<td width='250px' class='yard8 destination'></td>
<td width='100px'class='yard8 length'>3455'</td>
<td width='100px' class='yard8 weight'></td>
<td width='150px' class='yard8 status'></td>
<td class='yard8'>
<div class='progressContainer'>
<div class='progress' style='width:54%'>54%</div>
</div>
</td>
<td class='yard8 remarks'></td>
<td width='59px'>
<div class="yardDropdown">
<button class="yardDropbtn">Menu<i class="bx bx-menu"></i></button>
<div class="yard-dropdown-content">Edit TrackAEI Populate</div>
</div>
</td>
</tr>
<form action="" method="POST"></form>
document.querySelector(".yardDropdown");
The querySelector method only returns the first element matching the selector, so it can never work for more than the first row.
You need to use querySelectorAll instead and then loop over all the elements found:
let dropDowns = document.querySelectorAll(".yardDropdown");
for (let i = 0; i < dropDowns.length; i++) {
let dropDown = dropDowns[i]
dropDown.addEventListener('click', function () {
// do something, you can use the `i` variable to know which row has been clicked if you need to
})
}

added styling to my table and it stopped working

I have made an order form in java and html css everything was going well until I decided to put some styling in my code and now it doesn't reset post it basically does nothing its probably something small but I cant find it even when I use the javascript console.
It needs to show the amount and I need to add a discount that only works on monday and Friday
!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Order Form</title>
<link href="pl.css" rel="stylesheet">
<style>
</style>
</head>
<body>
<h1><span class="blue"><</span>faiz<span class="blue">></span> <span class="yellow">pizza</span></h1>
<form>
<table class="container">
<thead>
<tr>
<th><h1>Pizza</h1></th>
<th><h1>Image</h1></th>
<th><h1>Quantity</h1></th>
<th><h1>Price</h1></th>
<th><h1>Total</h1></th>
</tr>
</thead>
<tbody>
<tr>
<td>margherita</td>
<td><img src="Pizza_Margherita_stu_spivack-removebg-preview.png" alt="margherita" height="400" width="400"></td>
<td><input type="text" id="QtyA"></td>
<td>€3.00</td>
<td id="TotalA"></td>
</tr>
</tr>
<tr>
<td>Tuna</td>
<td><img src="Tuna_Treat-7268.png" alt="Tuna" height="400" width="400"></td>
<td><input type="text" id="QtyB"></td>
<td>€14.00</td>
<td id="TotalB"></td>
</tr>
<tr>
<td>fourcheese</td>
<td><img src="4_Cheese-7262.png" alt="fourcheese"></td>
<td><input type="text" id="QtyC"></td>
<td>€5.50</td>
<td id="TotalC"></td>
</tr>
<tr>
<td>double pepperoni</td>
<td><img src="Double_Pepperoni-7260.png" alt="pep" height="400" width="400"></td>
<td><input type="text" id="QtyD"></td>
<td>€5.50</td>
<td id="TotalD"></td>
</tr>
<tr>
<td>pizza</td>
<td>ef</td>
<td>fwrf</td>
<td>ref</td>
</tr>
<tr>
<td>refe</td>
<td>erf</td>
<td>erf</td>
<td>ref</td>
</tr>
<tr>
<td><input type="button" value="Get Grand Total"></td>
<input type="reset" value="Reset"></td>
</tr>
</tbody>
</table>
</form>
Javascript
<script>
var qtyBoxA = document.getElementById('QtyA');
var qtyBoxB = document.getElementById('QtyB');
var qtyBoxC = document.getElementById('QtyC');
var qtyBoxD = document.getElementById('QtyD');
var totBoxA = document.getElementById('TotalA');
var totBoxB = document.getElementById('TotalB');
var totBoxC = document.getElementById('TotalC');
var totBoxD = document.getElementById('TotalD');
var grandTot = document.getElementById('grandTotal');
var btnGetTot = document.querySelector("input[type=button]");
var btnReset = document.querySelector("input[type=reset]");
qtyBoxA.addEventListener("change", calc);
qtyBoxB.addEventListener("change", calc);
qtyBoxC.addEventListener("change", calc);
qtyBoxD.addEventListener("change", calc);
btnGetTot.addEventListener("click", getGrandTotal);
btnReset.addEventListener("click", reset);
var gt = null;
function calc() {
var priceA = 3;
var priceB = 4;
var priceC = 5.50;
var priceD = 5.50;
gt = 0;
var qtyA = parseInt(qtyBoxA.value, 10);
var qtyB = parseInt(qtyBoxB.value, 10);
var qtyC = parseInt(qtyBoxC.value, 10);
var qtyD = parseInt(qtyBoxD.value, 10);
if (!isNaN(qtyA)) { totBoxA.textContent = qtyA * priceA; gt += +totBoxA.textContent; }
if (!isNaN(qtyB)) { totBoxB.textContent = qtyB * priceB; gt += +totBoxB.textContent; }
if (!isNaN(qtyC)) { totBoxC.textContent = qtyC * priceC; gt += +totBoxC.textContent; }
if (!isNaN(qtyD)) { totBoxD.textContent = qtyD * priceD; gt += +totBoxD.textContent; }
grandTot.textContent = gt.toFixed(2);
}
function getGrandTotal(){
calc();
alert(gt);
}
function reset(){
totBoxA.textContent = "";
totBoxB.textContent = "";
totBoxC.textContent = "";
totBoxD.textContent = "";
grandTot.textContent = "";
}
</script>
</body>
</html>
#charset "UTF-8";
#import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
body {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
line-height: 1.42em;
color:#A7A1AE;
background-color:#1F2739;
}
h1 {
font-size:3em;
font-weight: 300;
line-height:1em;
text-align: center;
color: #4DC3FA;
}
h2 {
font-size:1em;
font-weight: 300;
text-align: center;
display: block;
line-height:1em;
padding-bottom: 2em;
color: #FB667A;
}
h2 a {
font-weight: 700;
text-transform: uppercase;
color: #FB667A;
text-decoration: none;
}
.blue { color: #185875; }
.yellow { color: #FFF842; }
.container th h1 {
font-weight: bold;
font-size: 1em;
text-align: left;
color: #185875;
}
.container td {
font-weight: normal;
font-size: 1em;
-webkit-box-shadow: 0 2px 2px -2px #0E1119;
-moz-box-shadow: 0 2px 2px -2px #0E1119;
box-shadow: 0 2px 2px -2px #0E1119;
}
.container {
text-align: left;
overflow: hidden;
width: 80%;
margin: 0 auto;
display: table;
padding: 0 0 8em 0;
}
.container td, .container th {
padding-bottom: 2%;
padding-top: 2%;
padding-left:2%;
}
/* Background-color of the odd rows */
.container tr:nth-child(odd) {
background-color: #323C50;
}
/* Background-color of the even rows */
.container tr:nth-child(even) {
background-color: #2C3446;
}
.container th {
background-color: #1F2739;
}
.container td:first-child { color: #FB667A; }
.container tr:hover {
background-color: #464A52;
-webkit-box-shadow: 0 6px 6px -6px #0E1119;
-moz-box-shadow: 0 6px 6px -6px #0E1119;
box-shadow: 0 6px 6px -6px #0E1119;
}
.container td:hover {
background-color: #FFF842;
color: #403E10;
font-weight: bold;
box-shadow: #7F7C21 -1px 1px, #7F7C21 2px 2px, #7F7C21 -3px 3px, #7F7C21 -4px 4px, #7F7C21 -5px 5px, #7F7C21 -6px 6px;
transform: translate3d(6px, -6px, 0);
transition-delay: 0s;
transition-duration: 0.4s;
transition-property: all;
transition-timing-function: line;
}
#media (max-width: 800px) {
.container td:nth-child(4),
.container th:nth-child(4) { display: none; }
}
After fixing a lot of things in your code, it works :)
The main issue was within your code logic, you just blindly copied the code without knowing how it works.
You are getting this element but it didn't exists var grandTot = document.getElementById('grandTotal'); and rest of the code in getGrandTotal() didn't work because of the null error.
I Just added this line in html and created that element with id grandTotal
<td id="grandTotal"></td>
var qtyBoxA = document.getElementById('QtyA');
var qtyBoxB = document.getElementById('QtyB');
var qtyBoxC = document.getElementById('QtyC');
var qtyBoxD = document.getElementById('QtyD');
var totBoxA = document.getElementById('TotalA');
var totBoxB = document.getElementById('TotalB');
var totBoxC = document.getElementById('TotalC');
var totBoxD = document.getElementById('TotalD');
var grandTot = document.getElementById('grandTotal');
var btnGetTot = document.querySelector("input[type=button]");
var btnReset = document.querySelector("input[type=reset]");
qtyBoxA.addEventListener("change", calc);
qtyBoxB.addEventListener("change", calc);
qtyBoxC.addEventListener("change", calc);
qtyBoxD.addEventListener("change", calc);
btnGetTot.addEventListener("click", getGrandTotal);
btnReset.addEventListener("click", reset);
var gt = null;
function calc() {
var priceA = 3;
var priceB = 4;
var priceC = 5.50;
var priceD = 5.50;
gt = 0;
var qtyA = parseInt(qtyBoxA.value, 10);
var qtyB = parseInt(qtyBoxB.value, 10);
var qtyC = parseInt(qtyBoxC.value, 10);
var qtyD = parseInt(qtyBoxD.value, 10);
if (!isNaN(qtyA)) {
totBoxA.textContent = qtyA * priceA;
gt += +totBoxA.textContent;
}
if (!isNaN(qtyB)) {
totBoxB.textContent = qtyB * priceB;
gt += +totBoxB.textContent;
}
if (!isNaN(qtyC)) {
totBoxC.textContent = qtyC * priceC;
gt += +totBoxC.textContent;
}
if (!isNaN(qtyD)) {
totBoxD.textContent = qtyD * priceD;
gt += +totBoxD.textContent;
}
grandTot.textContent = gt.toFixed(2);
}
function getGrandTotal() {
calc();
}
function reset() {
totBoxA.textContent = "";
totBoxB.textContent = "";
totBoxC.textContent = "";
totBoxD.textContent = "";
grandTot.textContent = "";
}
#charset "UTF-8";
#import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
body {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
line-height: 1.42em;
color: #A7A1AE;
background-color: #1F2739;
}
h1 {
font-size: 3em;
font-weight: 300;
line-height: 1em;
text-align: center;
color: #4DC3FA;
}
h2 {
font-size: 1em;
font-weight: 300;
text-align: center;
display: block;
line-height: 1em;
padding-bottom: 2em;
color: #FB667A;
}
h2 a {
font-weight: 700;
text-transform: uppercase;
color: #FB667A;
text-decoration: none;
}
.blue {
color: #185875;
}
.yellow {
color: #FFF842;
}
.container th h1 {
font-weight: bold;
font-size: 1em;
text-align: left;
color: #185875;
}
.container td {
font-weight: normal;
font-size: 1em;
-webkit-box-shadow: 0 2px 2px -2px #0E1119;
-moz-box-shadow: 0 2px 2px -2px #0E1119;
box-shadow: 0 2px 2px -2px #0E1119;
}
.container {
text-align: left;
overflow: hidden;
width: 80%;
margin: 0 auto;
display: table;
padding: 0 0 8em 0;
}
.container td,
.container th {
padding-bottom: 2%;
padding-top: 2%;
padding-left: 2%;
}
/* Background-color of the odd rows */
.container tr:nth-child(odd) {
background-color: #323C50;
}
/* Background-color of the even rows */
.container tr:nth-child(even) {
background-color: #2C3446;
}
.container th {
background-color: #1F2739;
}
.container td:first-child {
color: #FB667A;
}
.container tr:hover {
background-color: #464A52;
-webkit-box-shadow: 0 6px 6px -6px #0E1119;
-moz-box-shadow: 0 6px 6px -6px #0E1119;
box-shadow: 0 6px 6px -6px #0E1119;
}
.container td:hover {
background-color: #FFF842;
color: #403E10;
font-weight: bold;
box-shadow: #7F7C21 -1px 1px, #7F7C21 2px 2px, #7F7C21 -3px 3px, #7F7C21 -4px 4px, #7F7C21 -5px 5px, #7F7C21 -6px 6px;
transform: translate3d(6px, -6px, 0);
transition-delay: 0s;
transition-duration: 0.4s;
transition-property: all;
transition-timing-function: line;
}
#media (max-width: 800px) {
.container td:nth-child(4),
.container th:nth-child(4) {
display: none;
}
}
<h1>
<span class="blue"><</span>faiz <span class="blue">></span>
<span class="yellow">pizza</span>
</h1>
<form>
<table class="container">
<thead>
<tr>
<th>
<h1>Pizza</h1>
</th>
<th>
<h1>Image</h1>
</th>
<th>
<h1>Quantity</h1>
</th>
<th>
<h1>Price</h1>
</th>
<th>
<h1>Total</h1>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>margherita</td>
<td>
<img src="Pizza_Margherita_stu_spivack-removebg-preview.png" alt="margherita" height="400" width="400">
</td>
<td>
<input type="text" id="QtyA">
</td>
<td>€3.00</td>
<td id="TotalA"></td>
</tr>
</tr>
<tr>
<td>Tuna</td>
<td>
<img src="Tuna_Treat-7268.png" alt="Tuna" height="400" width="400">
</td>
<td>
<input type="text" id="QtyB">
</td>
<td>€14.00</td>
<td id="TotalB"></td>
</tr>
<tr>
<td>fourcheese</td>
<td>
<img src="4_Cheese-7262.png" alt="fourcheese">
</td>
<td>
<input type="text" id="QtyC">
</td>
<td>€5.50</td>
<td id="TotalC"></td>
</tr>
<tr>
<td>double pepperoni</td>
<td>
<img src="Double_Pepperoni-7260.png" alt="pep" height="400" width="400">
</td>
<td>
<input type="text" id="QtyD">
</td>
<td>€5.50</td>
<td id="TotalD"></td>
</tr>
<tr>
<td>pizza</td>
<td>ef</td>
<td>fwrf</td>
<td>ref</td>
</tr>
<tr>
<td>refe</td>
<td>erf</td>
<td>erf</td>
<td>ref</td>
</tr>
<tr>
<td>
<input type="button" value="Get Grand Total">
</td>
<td>
<input type="reset" value="Reset">
</td>
<td id="grandTotal"></td> <!--- This is the line I added ---->
</tr>
</tbody>
</table>
</form>
Good Luck :)

Jquery character count for each of many textareas/textboxes

I'm trying to count the number of characters in each textarea on a page. I've decided to use the code below (taken from here), however I am struggling to get it working.
$(function(){
$('textarea').on('keyup', function(){
var wordsLength = $(this).val().length;
$(this).next().find('').html(wordsLength);
});
});
Below are my html and css. I am not able to edit the CSS or Html directly, only using jquery scripts. I'm not sure what I'm missing. Any help would be greatly appreciated:
table {
display: table;
border-collapse: separate;
box-sizing: border-box;
border-spacing: 2px;
border-color: grey;
}
input[type=password],
input[type=text],
input[type=file],
input:not([type]),
select,
textarea,
.sp-peoplepicker-topLevel,
.sp-peoplepicker-topLevelDisabled,
.sp-peoplepicker-autoFillContainer,
.ms-inputBox {
border: 1px solid #b9b9b9;
background-color: #ffffff;
background-color: rgba(255, 255, 255, 0.90);
color: #444444;
}
textarea {
-webkit-writing-mode: horizontal-tb !important;
text-rendering: auto;
color: -internal-light-dark-color(black, white);
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
-webkit-appearance: textarea;
background-color: -internal-light-dark-color(rgb(255, 255, 255), rgb(59, 59, 59));
-webkit-rtl-ordering: logical;
flex-direction: column;
resize: auto;
cursor: text;
white-space: pre-wrap;
overflow-wrap: break-word;
margin: 0em;
font: 400 13.3333px Arial;
border-width: 1px;
border-style: solid;
border-color: -internal-light-dark-color(rgb(118, 118, 118), rgb(195, 195, 195));
border-image: initial;
padding: 2px;
}
<table width="100%" role="presentation">
<tbody>
<tr>
<td style="width:100%;"><textarea style="display:none;" origvalue="<p>​I can't speak</p><p>This is a great improvement</p><p><br/>&#160;</p>" spellcheck="true" maxlength="225"><p>​I can't speak</p><p>This is a great improvement</p><p><br>&nbsp;</p></textarea>
<div class="ms-rtestate-field ms-rtefield ms-inputBox ms-rtestate-write ms-inputBoxActive" style="min-height:84px;width:75%;" disabled="disabled" contenteditable="true" role="textbox" aria-autocomplete="both" aria-haspopup="true" aria-multiline="true" spellcheck="true" rtedirty="false">
<p>​I can't spek</p>
<p>This is <span id="ms-rterangecursor-start" rtenodeid="1"></span><span id="ms-rterangecursor-end"></span>a great immmprovemet</p>
<p><br> </p>
</div>
</td>
</tr>
</tbody>
</table>
The main issue is because you've attached the event handler to the textarea yet the visible element that's being typed in to is a contenteditable div. As such you need to correct your selector. As this element is a div you need to use text() or html() to read its content, not val(). It would also make more sense to use the input event for this.
Secondly, you need to fix the selector which targets the element to display the character count in.
$(function() {
$('div[contenteditable="true"]').on('input', function() {
var wordsLength = $(this).text().length;
$(this).siblings('.count').html(wordsLength);
}).trigger('input');
});
table {
display: table;
border-collapse: separate;
box-sizing: border-box;
border-spacing: 2px;
border-color: grey;
}
input[type=password],
input[type=text],
input[type=file],
input:not([type]),
select,
textarea,
.sp-peoplepicker-topLevel,
.sp-peoplepicker-topLevelDisabled,
.sp-peoplepicker-autoFillContainer,
.ms-inputBox {
border: 1px solid #b9b9b9;
background-color: #ffffff;
background-color: rgba(255, 255, 255, 0.90);
color: #444444;
}
textarea {
-webkit-writing-mode: horizontal-tb !important;
text-rendering: auto;
color: -internal-light-dark-color(black, white);
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
-webkit-appearance: textarea;
background-color: -internal-light-dark-color(rgb(255, 255, 255), rgb(59, 59, 59));
-webkit-rtl-ordering: logical;
flex-direction: column;
resize: auto;
cursor: text;
white-space: pre-wrap;
overflow-wrap: break-word;
margin: 0em;
font: 400 13.3333px Arial;
border-width: 1px;
border-style: solid;
border-color: -internal-light-dark-color(rgb(118, 118, 118), rgb(195, 195, 195));
border-image: initial;
padding: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table width="100%" role="presentation">
<tbody>
<tr>
<td style="width:100%;"><textarea style="display:none;" origvalue="<p>​I can't speak</p><p>This is a great improvement</p><p><br/>&#160;</p>" spellcheck="true" maxlength="225"><p>​I cannt spek</p><p>This is a great improvement</p><p><br>&nbsp;</p></textarea>
<div class="ms-rtestate-field ms-rtefield ms-inputBox ms-rtestate-write ms-inputBoxActive" style="min-height:84px;width:75%;" disabled="disabled" contenteditable="true" role="textbox" aria-autocomplete="both" aria-haspopup="true" aria-multiline="true" spellcheck="true" rtedirty="false">
<p>​I cannt spek</p>
<p>This is <span id="ms-rterangecursor-start" rtenodeid="1"></span><span id="ms-rterangecursor-end"></span>a great immmprovemet</p>
<p><br> </p>
</div>
<span class="count"></span>
</td>
</tr>
</tbody>
</table>

How to create collapsible content with split button? (HTML/CSS/JS)

With two columns (left indicates name; right provide collapse function(a button)), how would you create collapsible content on the next row with full width (covers both columns)?
I am only able to collapse within a certain column. I tried to collapse a row below by creating a new div, but then the collapsing action no longer seems to work.
It should look like this:
Thank you for your help!
JavaScript is from: https://www.w3schools.com/howto/howto_js_collapsible.asp
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
:root {
--colorbggray: rgb(65,65,65);
--colorlightgray: rgb(150,150,150);
--colorcyan: rgb(0, 229, 255);
--colorgreen: rgb(0, 255, 0);
--colorUpGrey: rgb(135,135,135);
--colorLowGrey: rgb(38,38,38);
--colorMidGrey: rgb(95,95,95);
--colorGreen: rgb(11,69,2);
--colorAmber: orange;
--colorRed: red;
}
.verticalmenu-auto {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}
.verticalmenu-auto > div {
border-top: 2px solid var(--colorUpGrey);
border-bottom: 2px solid var(--colorLowGrey);
border-left: 2px solid var(--colorUpGrey);
border-right: 2px solid var(--colorLowGrey);
background: var(--colorMidGrey); color: white;
width: 100px;
padding-top: 8px;
padding-bottom: 8px;
padding-right: 16px;
padding-left: 16px;
margin: 0.5px;
text-align: left;
font-size: 16px;
}
.verticalmenu-auto li, {
border-top: 2px solidauto var(--colorUpGrey);
border-bottom: 2px solid var(--colorLowGrey);
border-left: 2px solid var(--colorUpGrey);
border-right: 2px solid var(--colorLowGrey);
background: var(--colorMidGrey);
}
.collapsible {
background: var(--colorMidGrey); color: white;
cursor: pointer;
width: 100%;
border: none;
text-align: center;
outline: none;
}
.collapsible:after {
content: '\1433';
float: center;
transform: scale(.7, 1);
}
.active:after {
content: "\142F";
transform: scale(1, .7);
}
.content {
max-height: 0;
overflow: hidden;
transition: max-height 0.0s ease-out;
grid-column-start: -1;
grid-column-end: 1;
background-color: gray;
}
<body>
<p>On right side open content which is has the width of both columns combined</p>
<ul style="list-style:none;padding-left:0;">
<li>
<div class="verticalmenu-auto">
<div style="flex-grow: 10">Name</div>
<div style="flex-grow: 1; text-align: center">
<button class="collapsible"></button>
<div class='content'>
<p> content</p>
</div>
</div>
</div>
</li>
<li>
<div class="verticalmenu-auto">
<div style="flex-grow: 10">Name</div>
<div style="flex-grow: 1; text-align: center">
<button class="collapsible"></button>
<div class='content'>
<p> content</p>
</div>
</div>
</div>
</li>
A slight change in your JS toggle and also putting content outside the parent div so that it act as block
$(document).ready(function () {
$('.collapsible').on('click', function(event){
event.preventDefault();
// create accordion variables
var accordion = $(this);
var accordionContent = accordion.closest('.verticalmenu-auto').next('.content');
// toggle accordion link open class
accordion.toggleClass("active");
// toggle accordion content
accordionContent.slideToggle(250);
accordionContent.toggleClass("active");
});
});
:root {
--colorbggray: rgb(65,65,65);
--colorlightgray: rgb(150,150,150);
--colorcyan: rgb(0, 229, 255);
--colorgreen: rgb(0, 255, 0);
--colorUpGrey: rgb(135,135,135);
--colorLowGrey: rgb(38,38,38);
--colorMidGrey: rgb(95,95,95);
--colorGreen: rgb(11,69,2);
--colorAmber: orange;
--colorRed: red;
}
.verticalmenu-auto {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}
.verticalmenu-auto > div {
border-top: 2px solid var(--colorUpGrey);
border-bottom: 2px solid var(--colorLowGrey);
border-left: 2px solid var(--colorUpGrey);
border-right: 2px solid var(--colorLowGrey);
background: var(--colorMidGrey); color: white;
width: 100px;
padding-top: 8px;
padding-bottom: 8px;
padding-right: 16px;
padding-left: 16px;
margin: 0.5px;
text-align: left;
font-size: 16px;
}
.verticalmenu-auto li, {
border-top: 2px solidauto var(--colorUpGrey);
border-bottom: 2px solid var(--colorLowGrey);
border-left: 2px solid var(--colorUpGrey);
border-right: 2px solid var(--colorLowGrey);
background: var(--colorMidGrey);
}
.collapsible {
background: var(--colorMidGrey); color: white;
cursor: pointer;
width: 100%;
border: none;
text-align: center;
outline: none;
}
.collapsible:after {
content: '\1433';
float: center;
transform: scale(.7, 1);
}
.collapsible.active:after {
content: "\142F";
transform: scale(1, .7);
}
.content {
display: none;
overflow: hidden;
transition: max-height 0.0s ease-out;
grid-column-start: -1;
grid-column-end: 1;
background-color: #BFBFBF;
padding: 10px;
color: #fff;
}
.content.active {
height: auto;
display: block !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p>On right side open content which is has the width of both columns combined</p>
<ul style="list-style:none;padding-left:0;">
<li>
<div class="verticalmenu-auto">
<div style="flex-grow: 10">Name</div>
<div style="flex-grow: 1; text-align: center">
<button class="collapsible"></button>
</div>
</div>
<div class='content'>
<p> content</p>
</div>
</li>
<li>
<div class="verticalmenu-auto">
<div style="flex-grow: 10">Name</div>
<div style="flex-grow: 1; text-align: center">
<button class="collapsible"></button>
</div>
</div>
<div class='content'>
<p> content</p>
</div>
</li>
Are you need like this?
var buttons = document.querySelectorAll('.toggle');
buttons.forEach(function(el) {
el.addEventListener('click', function(event) {
var target = event.target.getAttribute('target');
document.getElementById(target).classList.toggle('expanded');
});
});
table {
width: 100%;
}
table td:nth-child(2) {
width: 100px;
}
.row-detail {
display: none;
}
.expanded {
display: block;
}
<table>
<tr>
<td>Row 1</td>
<td><button class="toggle" target="row-detail-1">Toggle 1</button></td>
</tr>
<tr id="row-detail-1" class="row-detail">
<td colspan="2">This detail from row 1</td>
</tr>
<tr>
<td>Row 2</td>
<td><button class="toggle" target="row-detail-2">Toggle 2</button></td>
</tr>
<tr id="row-detail-2" class="row-detail">
<td colspan="2">This detail from row 2</td>
</tr>
<tr>
<td>Row 3</td>
<td><button class="toggle" target="row-detail-3">Toggle 3</button></td>
</tr>
<tr id="row-detail-3" class="row-detail">
<td colspan="2">This detail from row 3</td>
</tr>
</table>

Need Help Transferring Data Between HTML Tables [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 3 years ago.
I have two tables, one with a list of players for you to choose with a checkbox and another where the players are supposed to appear after clicking the checkbox. There is also a div in table2 that subtracts the player's value from the set $35000 value.
When I click the checkbox, the player goes to table2 and the salary subtracts, like expected, but when I uncheck the checkbox, the player returns to table1 and the salary doesn't return back to $35000. Also it will not let click that same player again, so I was wondering what the problem may be.
Here's the Code Below:
$(document).ready(function() {
$('#table1 tbody tr td input.checkmark').on('click', function() {
var row = $(this).closest('tr').clone();
$('#tbody2').append(row);
$(this).closest('tr').remove();
});
$('body').on('click', '#table2 tbody tr td input.checkmark', function() {
if (!$(this).prop('checked')) {
var row = $(this).closest('tr').clone();
$('#tbody1').prepend(row);
$(this).closest('tr').remove();
}
});
})
//FUNCTION FOR TOTALING SALARY
function calc() {
var salary = $('[name="salary"]');
var sum = 35000;
$('[name="salary"]').each(function() {
if (this.checked) {
sum -= parseInt($(this).val());
}
$("#salary_total").val(sum);
});
};
//CLICK EVENT HANDLER
$(document).ready(function() {
$('[name="salary"]').on('click', calc);
});
<div class="table_container">
<table class="mytable" id="table1">
<caption><figure class="table_head">Players</figure></caption>
<thead><tr class="table1">
<th>Position</th>
<th> Name</th>
<th>FPPG</th>
<th>Salary</th>
<th>Game</th>
<th></th>
</tr></thead>
<tbody id="tbody1">
<tr class="table1">
<td>P</td>
<td>Stephen Strasburg</td>
<td>39.56</td>
<td>10,800</td>
<td>MIL#WAS</td>
<td><input name="salary" class="checkmark checkbox" id="toggle" type="checkbox" value="10800"></td>
</tr>
<tr class="table1">
<td>P</td>
<td>Patrick Corbin</td>
<td>38.82</td>
<td>10,500</td>
<td>MIL#WAS</td>
<td><input name="salary" class="checkmark checkbox" id="toggle" type="checkbox" value="10500"></td>
</tr>
<form id="playerForm">
<table class="mytable" id="table2">
<caption align="bottom">
<figure id="max">Max Salary: $35,000</figure>
<figcaption>
<button class="optimize_btn" id="optimizeButton">Optimize</button>
<button class="optimize_btn" id="reset">Clear</button>
</figcaption>
</caption>
<caption>
<figure class="table_head">My Team</figure>
<figcaption><div class="dollar">
<input name="calc" disabled="" class="salary_count good" id="salary_total" type="number" max="35000" value="35000"></div>
</figcaption>
</caption>
<thead><tr class="table2"></tr></thead>
<tbody id="tbody2">
</tbody>
</table></form>
.mytable{
background-color: blanchedalmond;
font-size: 20px;
overflow: scroll;
}
.table_head{
width:300px;
font-size: 2rem;
font-weight: bolder;
}
.mytable th:first-child {
padding-left: 10px;
}
.mytable tr {
padding-left: 10px;
}
.mytable tr td:first-child {
padding-left: 10px;
border-left: 0;
}
.mytable tr td {
padding: 8px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
background: #fafafa;
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafa fa));
background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
}
.mytable tr.even td {
background: #f6f6f6;
background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6 f6));
background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6);
}
.mytable tr:last-child td {
border-bottom: 0;
}
.mytable tr:last-child td:first-child {
-moz-border-radius-bottom-left: 3px;
-webkit-border-bottom-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.mytable tr:last-child td:last-child {
-moz-border-radius-bottom-right: 3px;
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.mytable tr:hover td {
background: #f2f2f2;
transform: scale(1.01);
padding-left: 10px;
outline: 1px solid #191970;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
}
#footer{
background-color: hsl(291,5%,29%);
color: ivory;
text-align: center;
font-size: 0.8em;
font-variant:small-caps;
padding-top: 5px;
padding-bottom: 5px;
bottom:0;
width:100%;
clear: both;
margin: 0 auto;
}
#wrapper_lineup{
margin: 0 auto;
position: relative;
max-width: 1284px;
background-color: #fff;
}
.header{
text-align: center;
padding-bottom: 15px;
}
.table_container{width:1200px;margin:0 auto;}
table{
float: left;
}
.salary_count {
width: 120px !important;
padding: 7px;
display: inline-block;
border: 1px hidden;
border-radius: 4px;
font-family: brush-script-std;
font-weight: bold;
background-color: white;
font-size: 2.8rem;
}
.dollar{
display:inline-block;
position: relative;
font-size: 2.8rem;
font-family: brush-script-std;
color: black;
font-weight: bold;
}
.dollar input{
padding-left:15px;
}
.dollar:before {
position: absolute;
content:"$";
left:-10px;
top:8px;
}
#table1{
margin-right: 10px;
overflow: auto;
cursor: pointer;
}
#table2{
margin-left: 40px;
cursor: pointer;
}
.checkmark {
border-radius:4px;
border:1px solid #D0D0D0;
overflow:auto;
float:left;
height: 25px;
width: 25px;
background-color: skyblue;
}
.over{
background-color: white;
color:red;
font-weight: bold;
}
div[comma-value]{
position:relative;
}
div[comma-value]:before{
content: attr(comma-value);
position:absolute;
left:0;
}
div[comma-value] input{
color:#fff;
}
.optimize_btn {
background: none;
border: 1px solid #dbdbdb;
cursor: pointer;
background-color: #11AAFF;
color: white;
font-family: 'Aaux-Next-Regular';
font-size: 20px;
width: 120px;
height: 50px
}
.optimize_btn:hover{
background-color: white;
color: black;
}
.choose{
color: black;
font-weight:lighter;
font-size: 2rem;
}
.select_pos{
color: deepskyblue;
font-weight:bolder;
font-size: 2rem;
}
#max{
color: black;
width:200px;
}
This is your offending line:
$('#table1 tbody tr td input.checkmark').on('click', ...)
^^ This is a statically run query select by jquery, meaning when you clone the rows back to your original table they are not the original dom elements so they no longer have this event handler.
What you'll want to do is write an addListener function that will take the table row and attach the appropriate event handlers to it. In this case:
$('#table1 tbody tr td input.checkmark').on('click', move_to_table2);
function move_to_table2() {
var row = $(this).closest('tr').clone();
$('#tbody2').append(row);
$(this).closest('tr').remove();
}
...
(inside table2's event handler)
var row = $(this).closest('tr').clone();
$(row).on('click', move_to_table2)
...
My example borks up the salary calculation but I think you can handle that!

Categories