We Keep Coding

Hover keyframe values green and red

I'm kind of stuck in a keyframe. I have a table with values from a fetch (json) and i should add a hover when the values is less than 5 in red and starting from 5 in green. This is my code in javascript ->
how do i have to implement the keyframe with it in css or is it different that i think?
// Html
<div id="group3">
<table class="table">
<thead>
<tr class="info">
<th></th>
<th>February</th>
<th>March</th>
<th>April</th>
<th>May</th>
<th>June</th>
<th>July</th>
<th>August</th>
</tr>
</thead>
<tbody id='mytable'>
</tbody>
</table>
</div>
//CSS
Keyframe?
//hover
let cells = document.querySelectorAll("tbody");
cells.forEach( el => el.addEventListener('mouseenter', function () {
if(el.textContent < 5){
el.classList.add('underfive');
} else if (el.textContent >=5){
el.classList.add('abovefive');
}
}));
// reset animationx
cells.forEach(el => el.addEventListener('mouseleave', function () {
if(el.textContent < 5){
el.classList.remove('underfive');
} else if (el.textContent >=5){
el.classList.remove('abovefive');
}
}));
it should be like this ->
this is the startpage, background is white
this is the end result how it should be, uploaded from a json file in a table, red value
this is the green value when it's 5 of higher

Based on what you say you want to show a different background color or styling in general than the default if the mouse is over the td.
So use :hover for that. You want to have a transition between those states so use transition.
You want to have a different color if it is above or below 5. So define what you want to have as default and add a class for the other case.
let data = [1,4,2,8,12,2,5,7];
const tr = document.querySelector('tr');
data.forEach(elem => {
let td = document.createElement('td');
td.textContent = elem;
td.classList.toggle('belowfive', elem < 5);
tr.appendChild(td);
});
td {
transition: background-color 1s;
background-color: white;
padding: 1rem;
border: 1px solid hsl(0 0% 50%);
}
td:hover {
background-color: green;
}
td.belowfive:hover {
background-color: red;
}
<table>
<tbody>
<tr>
</tr>
</tbody>
</table>

How to select each row and highlight / unselect each row and highlight from data api call

This is my table on start
<div class= "col-md-7" id = "recyclable-list" >
<table class="table">
<thead>
<tr>
<th style=" padding-left:25px;";>RecyclableID</th>
<th style=" padding-left:100px;">Name</th>
<th style=" text-align: center;">RecyclableType</th>
</tr>
</thead>
<tbody id="recycleTable">
</tbody>
</table>
This is my script call for database
var myarray = [];
$.ajax({
url:"https://ecoexchange.dscloud.me:8080/api/get",
method:"GET",
// In this case, we are going to use headers as
headers:{
// The query you're planning to call
// i.e. <query> can be UserGet(0), RecyclableGet(0), etc.
query:"RecyclableGet(0)",
// Gets the apikey from the sessionStorage
apikey:sessionStorage.getItem("apikey")
},
success:function(data,xhr,textStatus) {
myarray = data;
buildTable(myarray);
console.log(myarray);
},
error:function(xhr,textStatus,err) {
console.log(err);
}
});
function buildTable(data){
var table = document.getElementById("recycleTable")
for(var i = 0; i < data.length; i++){
var row = `<tr>
<td>${data[i].RecyclableID}</td>
<td>${data[i].Name}</td>
<td>${data[i].RecyclableType}</td>
</tr>`
table.innerHTML += row
}
};
This is my hightlight Js file
$( document ).ready(function() {
$("#recyclable-list").on('click',function() {
var selected = $('#recycleTable tr').on('click',async function(){
await $('#recycleTable tr').removeClass('highlight');
$(this).addClass('highlight');
});
$("#edit").prop('disabled',false);
$("#edit").removeClass('btn btn-secondary');
$("#edit").addClass('btn btn-primary');
$("#delete").prop('disabled',false);
if (!selected)
$(this).find('#recycleTable tr').addClass("highlight") & $('#recycleTable tr').removeClass('highlight');
else
$("#edit").prop('disabled',true) & $("#delete").prop('disabled',true) & $("#edit").removeClass('btn btn-primary') & $("#edit").addClass('btn btn-secondary');;
});
});
and this is my css style for highlight
.recycleTable.highlight{
background-color: #ddd;
}
But however the highlight now is selecting the whole table row instead of row by row, does anyone have any idea how to i change it to select row per row instead of the the whole row ?
Now the selected whole table have been fix but however i am unable to unselect the row i choose and button is not enabled when selected a row

Click event on tbody? not a good idea, i suggest you to change your code to this :
...
$("#recyclable-list").on('click',function() {
var selected = $(this).find('#recycleTable').hasClass("highlight");
...
if (!selected)
$(this).find('#recycleTable').addClass("highlight");
...

Update
Dynamically added <tr> must have the "click" event delegated to a parent element that's been there since the DOM was loaded (ie hard coded in HTML). In this case the <tbody> is a good canident. One extra parameter is needed:
/*
'tr' delegates click events to any <tr> within
the <tbody> whether static or dynamic.
*/
$('tbody').on('click', 'tr', function(e) {...
First of all, never use #id, use class, otherwise you have hindered your code -- that's especially true if you are using jQuery. #id is useful in circumstances such as Bootstrap plugins, but not much else. The example below uses only classes.
This will allow only a single <tr> to be highlighted and also removes highlighting if the <tr> was already highlighted.
$('tbody tr').not($(this)).removeClass('highlight');
$(this).toggleClass('highlight');
This will disable the <button>s if there's a highlighted <tr>
const btns = $('.btn-group button');
...
if ($(this).hasClass('highlight')) {
btns.prop('disabled', false).removeClass('disabled dark');
} else {
btns.prop('disabled', true).addClass('disabled dark');
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<style>
.highlight {
background-color: #ddd;
}
button {
display: inline-block;
width: 100px;
}
.dark {
background-color: #000;
color: #666;
}
</style>
</head>
<body>
<main class="fluid-container">
<fieldset class='btn-group'>
<button class='add btn btn-success'>Add Row</button>
<button class='dark edit btn btn-primary disabled change-row' disabled>Edit</button>
<button class='type btn btn-warning'>Add Type</button>
<button class='dark delete btn btn-danger disabled change-row' disabled>Delete</button>
</fieldset>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>User Name</th>
<th>Email</th>
</tr>
</thead>
<tbody></tbody>
</table>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
const buildTable = data => {
const table = document.querySelector('.table tbody');
for (let i = 0; i < data.length; i++) {
let row = `<tr>
<td>${data[i].name}</td>
<td>${data[i].username}</td>
<td>${data[i].email}</td>
</tr>`;
table.insertAdjacentHTML('beforeEnd', row);
}
};
const getData = async(url) => {
const response = await fetch(url);
const json = await response.json();
return buildTable(json);
};
getData('https://jsonplaceholder.typicode.com/users/');
$(document).ready(function() {
const btns = $('.change-row');
$("tbody").on('click', 'tr', function(e) {
/* //Add this line if you want only a single row selected
$('tbody tr').not($(this)).removeClass('highlight');
*/
$(this).toggleClass('highlight');
if ($('tbody tr').hasClass('highlight')) {
btns.prop('disabled', false).removeClass('disabled dark');
} else {
btns.prop('disabled', true).addClass('disabled dark');
}
});
});
</script>
</body>
</html>

You care calling id but your declaration is a class. Change from . to # as in #recycleTable.highlight

How to increment data index in javascript

I tried to update data attribute as my work below.
When I click square,data attribute should be incremented.
But the result is a little bit different. It seems not to be incremented.
How can I fix them?
And Why this issue inccured?
Thanks
$("td").click(function() {
index=$(this).data('layer');
index+=1
$(this).attr('data-layer',index);
console.log(this);
});
td {
border:solid black 1px;
width:50px;
height:50px;
cursor:pointer;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td data-layer="0"></td>
</tr>
</table>

An Html element can have a dataset and/or an attribute.
In your code you get the value of the dataset and change like if it is an attribute. This is your mistake.
For more details see .data() and .attr().
If you are inrested in attribues you need to use:
$("td").click(function() {
index=$(this).attr('data-layer');
index = index + 1;
$(this).attr('data-layer',index);
console.log(this);
});
Instead, if you need to use dataset:
$("td").click(function() {
index=$(this).data('layer');
index = index + 1;
$(this).data('layer',index);
console.log($(this).data('layer'));
});
td {
border:solid black 1px;
width:50px;
height:50px;
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td data-layer="0"></td>
</tr>
</table>

$("td").click(function() {
const index = $(this).attr('data-layer');
const newIndex = Number(index) + 1;
$(this).attr('data-layer', newIndex);
console.log(this);
});
td {
border:solid black 1px;
width:50px;
height:50px;
cursor:pointer;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td data-layer="0"></td>
</tr>
</table>

How to define function and how to use each method in html

I confused how to define functions and how to use them.
I apply each method to html tables,but it seems that function didn't work well.
I define 2 classes and I can select them by clicking buttons.
In real case this processing is somewhat complicated ,so that I would like to define click effect as function.
① Why this code didn't work?
② Are there any other sophisticated method for realize this?
If someone has an opinion please let me know.
Thanks.
$('.click_btn').on('click', function(e) {
e.preventDefault();
style = $(this).data().style;
});
function hospitalization(){
$(this).nextAll(':lt(3)').addClass(style);
}
function outpatient() {
$(this).removeClass().addClass(style);
}
function register() {
function clicked() {
if (style=="style1"){
hospitalization()
}
else{
outpatient()
}
}
$(this).on({
click: clicked
});
}
$("#calendar .day").each(register);
td {
padding: 10px;
border: solid black 1px;
}
table {
border-collapse: collapse;
}
.is-clicked {
background-color: aqua;
}
td:hover {
background-color: yellow;
}
.style1{
background-color:red;}
.style2{
background-color:aqua;}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div id=calendar>
<table>
<tr>
<td id=1 class=day>1</td>
<td id=2 class=day>2</td>
<td id=3 class=day>3</td>
<td id=4 class=day>4</td>
<td id=5 class=day>5</td>
<td id=6 class=day>6</td>
<td id=7 class=day>7</td>
</tr>
</table>
</div>
<button class="click_btn" data-style="style1">style1</button>
<button class="click_btn" data-style="style2">style2</button>

You need to clean up js little bit. define global variable if u want to reuse. click pass the $(this). This will not work when u directly call method like hospitalization ()
let style = "style1"
$('.click_btn').on('click', function (e) {
e.preventDefault();
style = $(this).data().style;
console.log(style)
});
function hospitalization(elm) {
elm.nextAll(':lt(3)').addClass(style);
}
function outpatient(elm) {
elm.removeClass().addClass(style);
}
$("#calendar .day").on("click", function clicked(event) {
if (style == "style1") {
hospitalization($(this))
} else {
outpatient($(this))
}
});
td {
padding: 10px;
border: solid black 1px;
}
table {
border-collapse: collapse;
}
.is-clicked {
background-color: aqua;
}
td:hover {
background-color: yellow;
}
.style1{
background-color:red;}
.style2{
background-color:aqua;}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div id=calendar>
<table>
<tr>
<td id=1 class=day>1</td>
<td id=2 class=day>2</td>
<td id=3 class=day>3</td>
<td id=4 class=day>4</td>
<td id=5 class=day>5</td>
<td id=6 class=day>6</td>
<td id=7 class=day>7</td>
</tr>
</table>
</div>
<button class="click_btn" data-style="style1">style1</button>
<button class="click_btn" data-style="style2">style2</button>

How to change index in html element

In my code, each class will be toggled by clicking them.
I would like to understand the data,class-index, in my code,class-index is changed and class will be changed aligned with this.
But when I look at developer tool, class-index dosen't seems to be changed.
<td class="classC" data-class-index="0">Value 1</td>
<td class="classB" data-class-index="0">Value 1</td>
Considering this, I add undo button,it works as a reverse of toggle,but it didn't work well.
How can I fix it?
$(function(){
var classArray = ['classA','classB','classC'];
var arrLen = classArray.length;
$("#our_calendar td").click(function() {
var classIndex = $(this).data('class-index');
$(this).removeClass(classArray[classIndex]);
if(classIndex < (arrLen-1)) {
classIndex++;
} else {
//reset class index
classIndex = 0;
}
$(this).addClass(classArray[classIndex]);
$(this).data('class-index',classIndex);
});
$("#undo").on('click',function() {
var classIndex = $(this).data('class-index');
$(this).removeClass(classArray[classIndex]);
classIndex--;
$(this).addClass(classArray[classIndex]);
$(this).data('class-index',classIndex);
})
});
.classA {
background-color: aqua;
}
.classB {
background-color: yellow;
}
.classC {
background-color: red;
}
td {
transition-duration:0.4s ;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="our_calendar">
<tr><td class="classA" data-class-index="0">Value 1</td></tr>
</table>
<button id="undo">undo</button>

With regard to the DOM not being updated, this is expected behaviour as the data() method only updates jQuery's internal cache of data attributes. It does not update the data attributes held in the relevant elements in the DOM.
With regard to your issue, the main problem is because you're using this within the #undo click handler. That will refer to the clicked button, not the td with the class on it. You just need to target the right element.
Also note that the classIndex logic can be simplified by using the modulo operator. Try this:
$(function() {
let classArray = ['classA', 'classB', 'classC'];
let arrLen = classArray.length;
let $td = $("#our_calendar td");
$td.click(function() {
let classIndex = $td.data('class-index');
$td.removeClass(classArray[classIndex]);
classIndex = ++classIndex % classArray.length;
$td.addClass(classArray[classIndex]);
$td.data('class-index', classIndex);
});
$("#undo").on('click', function() {
let classIndex = $td.data('class-index');
$td.removeClass(classArray[classIndex]);
classIndex = (--classIndex + classArray.length) % classArray.length;
$td.addClass(classArray[classIndex]);
$td.data('class-index', classIndex);
});
});
.classA { background-color: aqua; }
.classB { background-color: yellow; }
.classC { background-color: red; }
td { transition-duration: 0.4s; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="our_calendar">
<tr>
<td class="classA" data-class-index="0">Value 1</td>
</tr>
</table>
<button id="undo">undo</button>