JSFiddle - React, Tailwind, and code Playground

Cal_02

by Dave

HTML

<div>
<table class="dPick_cal" onclick="document.querySelector('.dScroll').style.display = 'none'">
<tr class="" style=""><td class="ddff" colspan="2" onclick="ddd();myFunc();event.stopPropagation()">2019


<table class="dScroll" style="" onclick="ddd()">
<tr><td class="aa up">up</td></tr><tr><td class="aa bb">0000</td></tr><tr><td class="aa bb">0000</td></tr><tr><td class="aa bb">0000</td></tr><tr><td class="aa bb">0000</td></tr><tr><td class="aa bb">0000</td></tr><tr><td class="aa bb">0000</td></tr><tr><td class="aa bb">0000</td></tr><tr><td class="aa bb">0000</td></tr><tr><td class="aa bb">0000</td></tr><tr><td class="aa bb">0000</td></tr><tr><td class="aa dn">dn</td></tr>
</table></td>





<td colspan="1"></td><td colspan="4">September</td></tr>
<tr class="" style=""><td>&lt;&lt;</td><td>&nbsp;&lt;</td><td colspan="3">Today</td><td>&gt;&nbsp;</td><td>&gt;&gt;</td></tr>
<tr class="" style=""><td>Su</td><td>Mo</td><td>Tu</td><td>We</td><td>Th</td><td>Fr</td><td>Sa</td></tr>
<tr class="" style=""><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td><td>06</td><td>07</td></tr>
</table>
</div>
<input class="zzdScroll" type="button" value="change" onclick="alert(document.querySelector('.ddff').innerHTML)">

CSS

.dPick_cal {
border-collapse: collapse;
text-align:center;
}
.dPick_cal tr:nth-child(1) td {
/*border: solid thin;
border-color:#000;*/
cursor:default;
}
.dPick_cal tr:nth-child(2) td {
cursor:default;
}
.dScroll {
position: absolute;
/*position: relative;*/
background-color:red;
display:none;
}

JavaScript

window.onload = function () {
//document.querySelectorAll('.aa').forEach(function(el){
//el.addEventListener('click', function() {
//alert(this.innerText);
//});
//});

var aw = parseInt(document.querySelector(".ddff").innerText) - 1;

document.querySelectorAll('.aa').forEach(function(el){
if (el.classList.contains('bb')){ el.innerText = aw++ }
el.addEventListener('click', function() {

if (this.classList.contains('up')){
//var aw = 0
//alert(this.parentElement.nextElementSibling.querySelector('TD').innerText);event.stopPropagation()
var aaw = parseInt(this.parentElement.nextElementSibling.querySelector('TD').innerText) - 1
document.querySelectorAll('.bb').forEach(function(el){
el.innerText = aaw++
});


}event.stopPropagation()
//var aw = parseInt(document.querySelector(".ddff").innerText) - 1

if (this.classList.contains('dn')){alert('do that');event.stopPropagation()}
if (this.classList.contains('bb')){alert(this.innerText)}
});
});

}

function ddd(){
}


function myFunc() {
//var aw = parseInt(document.querySelector(".ddff").innerText);
//var a = aw-1,b = aw,c = aw+1,d = aw+2,e = aw+3,f = aw+4,g = aw+5,h = aw+6,i = aw+7,j = aw+8
//alert(aw)
var elements = document.querySelectorAll('.dScroll');
elements.forEach(function(showhide){  
(showhide.style.display = showhide.style.display == "block" ?  "none" : "block" )

//event.stopPropagation();
//(showhide.style.display = 'block' )
//alert(document.querySelector(".ddff").innerText)
//alert(document.getElementsByClassName("aa")[1].innerText)
});
//zzzz(aw);
}

function zzzz(aw) {
}