We Keep Coding

How to remove class by hovering

I would like to set classaqua by hovering from clicked cells.
I attempt to getfirst id and then change class to hovering cells
But, I stacked removeclasswhen hovering,
My desired result is to change class fromfirstto last hoveredcells.
Are there any method for them?
Thanks
var first;
$(function() {
$("td").click(function() {
first = this.id;
$(this).addClass("aqua");
console.log(first);
});
$('td').hover(function() {
const id = +$(this).attr('id');
console.log(id);
for(var j=first;j<=id;j++){
$("#"+id).addClass("aqua");}
});
});
.aqua{
background-color: aqua;
}
td {
padding: 5px
transition-duration: 0.4s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<td id="1">1</td>
<td id="2">2</td>
<td id="3">3</td>
<td id="4">4</td>
<td id="5">5</td>
<td id="6">6</td>
<td id="7">7</td>
<td id="8">8</td>
<td id="9">9</td>
<td id="10">10</td>
</table>

You should declare the variable first outside of the click handler function. You also should convert the string id to number:
const id = Number($(this).attr('id'));
$(function() {
var first;
$("td").click(function() {
first = this.id;
$(this).addClass("aqua");
console.log(first);
});
$('td').hover(function() {
const id = Number($(this).attr('id'));
console.log(id);
for(var j = first;j <= id; j++){
$("#"+id).addClass("aqua");
}
});
});
.aqua{
background-color: aqua;
}
td {
padding: 5px
transition-duration: 0.4s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<td id="1">1</td>
<td id="2">2</td>
<td id="3">3</td>
<td id="4">4</td>
<td id="5">5</td>
<td id="6">6</td>
<td id="7">7</td>
<td id="8">8</td>
<td id="9">9</td>
<td id="10">10</td>
</table>

THere are a bunch of ways to do this. But i tried to change your initial code as little as i could.
First, you need to convert the id ( which are strings ) to numbers. You can do that with parseInt. Because comparing 2 strings is not correct in this situation. Because '2'<'10' will return false. String comparison happens on character basis. Which mean each character is compared with the corresponding character from the other string.
So '2' is greater > than '10' because '2' > '1' in alphabetical order.
Second, You should remove the aqua class from all td when clicking again on a td.
Third, you do not need a loop. Just check if the current hovered td id is greater than the one you first clicked then add class.
$(function() {
$("td").click(function() {
const first = parseInt(this.id, 10);
$(this).addClass("aqua");
const notThisTd = $('td').not(this)
notThisTd.removeClass("aqua");
notThisTd.hover(function() {
const id = parseInt(this.id, 10);
if (id > first) {
$(this).addClass("aqua");
}
});
});
});
.aqua{
background-color: aqua;
}
td {
padding: 5px
transition-duration: 0.4s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<td id="1">1</td>
<td id="2">2</td>
<td id="3">3</td>
<td id="4">4</td>
<td id="5">5</td>
<td id="6">6</td>
<td id="7">7</td>
<td id="8">8</td>
<td id="9">9</td>
<td id="10">10</td>
</table>

How to loop through array with objects inside

Actually its working with simple array
let box1 =[01, 02, 03];
function hitMiss(box) {
$("td").on("click", function(){
let y = $(this).attr("id");
if (box.find(boxId => boxId == y)) {
$(this).addClass("yes");
console.log("full");
} else {
$(this).addClass("no");
console.log("empty");
}
});
};
codepen
But i need to use objects in array
let boxes = [
{ locations: [01, 02, 03]},
{ locations: [23, 24, 25]},
{ locations: [41, 42, 43]}
];

ES6
You can also use reduce() and the spread operator. you can achieve your required result.
CODE SNIPPET
boxes = boxes.reduce((r, {locations}) => [...r, ...locations], []);
DEMO
let boxes = [{
locations: [01, 02, 03]
}, {
locations: [23, 24, 25]
}, {
locations: [41, 42, 43]
}];
hitMiss(boxes);
function hitMiss(box) {
box = box.reduce((r, {
locations
}) => [...r, ...locations], []);
$("td").on("click", function() {
let y = $(this).attr("id");
if (box.some(boxId => boxId == y)) {
$(this).addClass("yes");
console.log("full");
} else {
$(this).addClass("no");
console.log("empty");
}
});
};
html {
background-color: #859cac;
}
table {
margin-right: auto;
margin-left: auto;
}
td {
height: 40px;
width: 40px;
background-color: darkcyan;
border: solid 2px;
border-color: black;
}
.yes {
background-color: red;
}
.no {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id="00">00</td>
<td id="01">01</td>
<td id="02">02</td>
<td id="03"></td>
<td id="04"></td>
<td id="05"></td>
<td id="06"></td>
</tr>
<tr>
<td id="10"></td>
<td id="11"></td>
<td id="12"></td>
<td id="13"></td>
<td id="14"></td>
<td id="15"></td>
<td id="16"></td>
</tr>
<tr>
<td id="20"></td>
<td id="21"></td>
<td id="22"></td>
<td id="23"></td>
<td id="24"></td>
<td id="25"></td>
<td id="26"></td>
</tr>
<tr>
<td id="30"></td>
<td id="31"></td>
<td id="32"></td>
<td id="33"></td>
<td id="34"></td>
<td id="35"></td>
<td id="36"></td>
</tr>
<tr>
<td id="40"></td>
<td id="41"></td>
<td id="42"></td>
<td id="43"></td>
<td id="44"></td>
<td id="45"></td>
<td id="46"></td>
</tr>
<tr>
<td id="50"></td>
<td id="51"></td>
<td id="52"></td>
<td id="53"></td>
<td id="54"></td>
<td id="55"></td>
<td id="56"></td>
</tr>
<tr>
<td id="60"></td>
<td id="61"></td>
<td id="62"></td>
<td id="63"></td>
<td id="64"></td>
<td id="65"></td>
<td id="66"></td>
</tr>
</table>

Concatenate all the locations using reduce as
var allLocs = boxes.reduce( (a,c) => a.concat(c.locations), [])
Change your internal if-condition to
if (allLocs.find(boxId => boxId == y))
{
$(this).addClass("yes");
console.log("full");
}
else
{
$(this).addClass("no");
console.log("empty");
}
Please find updated pen

css - highlight td elements after finding row

I am trying to highlight some td elements after find the row.
I managed to find the row and td elements in two different steps (commented 'Works OK'). I would like to combine the two steps in a inside a for loop but It is not working.
$(document).ready(function() {
var dt = ['2017-11-02', '2017-11-03'];
cell = $('td:contains("value1")');
// works OK
$(cell).css({
color: "red",
border: "2px solid red"
});
for (var i = 0; i < dt.length; i++) {
// works OK
$('[data-date="' + dt[i] + '"]').css({
background: "blue",
color: "white"
});
// Not Working
//$('td:contains("value1")').find('[data-date="' + dt[i] + '"]').css({background:"blue", color:"white"});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<table>
<tr>
<td>text1</td>
<td>value1</td>
<td data-date="2017-11-01">1</td>
<td data-date="2017-11-02">2</td>
<td data-date="2017-11-03">3</td>
<td data-date="2017-11-04">4</td>
</tr>
<tr>
<td>text2</td>
<td>value2</td>
<td data-date="2017-11-01">1</td>
<td data-date="2017-11-02">2</td>
<td data-date="2017-11-03">3</td>
<td data-date="2017-11-04">4</td>
</tr>
</div>
Regards,
Elio Fernandes

you can replace
$('[data-date="' + dt[i] + '"]').css({
with
$(cell).parent().children('[data-date="' + dt[i] + '"]').css({
you can replace children with find, and replace $(cell).parent() by a different way to focus on the tr.
$(document).ready(function() {
var dt = ['2017-11-02', '2017-11-03'];
cell = $('td:contains("value1")');
// works OK
$(cell).css({
color: "red",
border: "2px solid red"
});
for (var i = 0; i < dt.length; i++) {
// works OK
$(cell).parent().children('[data-date="' + dt[i] + '"]').css({
background: "blue",
color: "white"
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<table>
<tr>
<td>text1</td>
<td>value1</td>
<td data-date="2017-11-01">1</td>
<td data-date="2017-11-02">2</td>
<td data-date="2017-11-03">3</td>
<td data-date="2017-11-04">4</td>
</tr>
<tr>
<td>text2</td>
<td>value2</td>
<td data-date="2017-11-01">1</td>
<td data-date="2017-11-02">2</td>
<td data-date="2017-11-03">3</td>
<td data-date="2017-11-04">4</td>
</tr>
</div>

Grouping first and last value in array (Consecutive values are group with first and last element)

I have one object array with time intervals , Number 0 indicates sunday . In my time scheduling page selecting different time ranges in a particular day . I want to group the time values . My initial array is given below
time schedule selection looks like
Each cell has data-day and data-time attribute and selected cell with data-selected attribute
i am iterate through the selected time and got the result like
var selectedIntervals = {};
$('td[data-selected]').each(function() {
var a = $(this).attr('data-day');
var b = $(this).attr('data-time');
if(!selectedIntervals[a]) {
selectedIntervals[a]=[];
}
selectedIntervals[a].push(b);
});
I want the output like
{
0: [["00:00", "05:00"],["08:00", "11:00"]]
}
Please help .

Try this:
arr = ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "08:00", "09:00", "10:00", "11:00"];
output = [];
start = arr[0];
for(i=1; i<arr.length; i++) {
if(i == arr.length-1) {
output.push([start, arr[i]]);
break;
}
if(parseInt(arr[i]) - parseInt(arr[i-1]) > 1) {
output.push([start, arr[i-1]]);
start = arr[i];
}
}

Here is a function to make intervals from an array of hour strings.
function makeInterval(arr) {
//e.g. arr = ["00:00", "01:00", "02:00", "03:00", "06:00", "10:00", "11:00"]
//returns [["00:00", "03:00"], ["06:00", "06:00"], ["10:00", "11:00"]]
var interval, result = [];
for (var i = 0; i < arr.length; i++) {
var hour = parseInt(arr[i]);
if (!interval || (hour != parseInt(interval[1]) + 1)) { //if first time or the hour jumps
interval = [arr[i], arr[i]]; //create new interval
result.push(interval);
}
else {
interval[1] = arr[i]; //update the end of interval
}
}
return result;
}
you can call it like
makeInterval(selectedIntervals[0]);
do a loop over the day number if necessary.

mid = a.length
mid=parseInt(a.length / 2)
b=[[a[0],a[mid]],[a[mid+1],a[a.length-1]]]
console.info(b)

Combining your initial code with elfan's code You get this:
$(function() {
var list = {};
var day = 0;
list[day] = selectedSchedules(day);
day = 1;
list[day] = selectedSchedules(day);
console.log(list);
function selectedSchedules(day) {
var schedules = [];
var interval, hour;
$('td[data-selected][data-day=' + day + ']').each(function() {
var b = $(this).data('time');
var current = parseInt(b);
if (!interval || (current != parseInt(interval[1]) + 1)) {
interval = [b, b];
schedules.push(interval);
} else {
interval[1] = b;
}
});
return schedules;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td data-day="0" data-time="00:00" data-selected="true">00:00</td>
<td data-day="1" data-time="00:00" data-selected="true">00:00</td>
</tr>
<tr>
<td data-day="0" data-time="01:00" data-selected="true">01:00</td>
<td data-day="1" data-time="01:00" data-selected="true">01:00</td>
</tr>
<tr>
<td data-day="0" data-time="02:00" data-selected="true">02:00</td>
<td data-day="1" data-time="02:00" data-selected="true">02:00</td>
</tr>
<tr>
<td data-day="0" data-time="03:00" data-selected="true">03:00</td>
<td data-day="1" data-time="03:00" data-selected="true">03:00</td>
</tr>
<tr>
<td data-day="0" data-time="04:00" data-selected="true">04:00</td>
<td data-day="1" data-time="04:00" data-selected="true">04:00</td>
</tr>
<tr>
<td data-day="0" data-time="05:00" data-selected="true">05:00</td>
<td data-day="1" data-time="05:00" data-selected="true">05:00</td>
</tr>
<tr>
<td data-day="0" data-time="06:00">06:00</td>
<td data-day="1" data-time="06:00">06:00</td>
</tr>
<tr>
<td data-day="0" data-time="07:00">07:00</td>
<td data-day="1" data-time="07:00">07:00</td>
</tr>
<tr>
<td data-day="0" data-time="08:00" data-selected="true">08:00</td>
<td data-day="1" data-time="08:00">08:00</td>
</tr>
<tr>
<td data-day="0" data-time="09:00" data-selected="true">09:00</td>
<td data-day="1" data-time="09:00" data-selected="true">09:00</td>
</tr>
<tr>
<td data-day="0" data-time="10:00" data-selected="true">10:00</td>
<td data-day="1" data-time="10:00" data-selected="true">10:00</td>
</tr>
<tr>
<td data-day="0" data-time="11:00" data-selected="true">11:00</td>
<td data-day="1" data-time="11:00" data-selected="true">11:00</td>
</tr>
<tr>
<td data-day="0" data-time="12:00">12:00</td>
<td data-day="1" data-time="12:00" data-selected="true">12:00</td>
</tr>
<tr>
<td data-day="0" data-time="13:00">13:00</td>
<td data-day="1" data-time="13:00">13:00</td>
</tr>
<tr>
<td data-day="0" data-time="14:00">14:00</td>
<td data-day="1" data-time="14:00">14:00</td>
</tr>
<tr>
<td data-day="0" data-time="15:00">15:00</td>
<td data-day="1" data-time="15:00">15:00</td>
</tr>
<tr>
<td data-day="0" data-time="16:00">16:00</td>
<td data-day="1" data-time="16:00">16:00</td>
</tr>
<tr>
<td data-day="0" data-time="17:00">17:00</td>
<td data-day="1" data-time="17:00">17:00</td>
</tr>
<tr>
<td data-day="0" data-time="18:00">18:00</td>
<td data-day="1" data-time="18:00">18:00</td>
</tr>
<tr>
<td data-day="0" data-time="19:00">19:00</td>
<td data-day="1" data-time="19:00">19:00</td>
</tr>
<tr>
<td data-day="0" data-time="20:00">20:00</td>
<td data-day="1" data-time="20:00" data-selected="true">20:00</td>
</tr>
<tr>
<td data-day="0" data-time="21:00">21:00</td>
<td data-day="1" data-time="21:00" data-selected="true">21:00</td>
</tr>
<tr>
<td data-day="0" data-time="22:00">22:00</td>
<td data-day="1" data-time="22:00" data-selected="true">22:00</td>
</tr>
<tr>
<td data-day="0" data-time="23:00">23:00</td>
<td data-day="1" data-time="23:00" data-selected="true">23:00</td>
</tr>
</tbody>
</table>

how to get value from table td using javascript

i want to get the value of Save using jquery through input on keyup function.. i am matching value with Buy..means if value matched with the value(range) of Buy..then get the value of Save..
for example if i entered 3 in textfield then it gets value from Save 45%..and if i entered 8 then result should be 51%..entered 15 result 56% and so on.
here is image link for better understanding.
http://easycaptures.com/fs/uploaded/807/3129634990.jpg
<table class="attribute_table">
<tbody>
<tr>
<th>Buy</th>
<th>Unit</th>
<th>Price/unit</th>
<th class="save_red">Save</th>
</tr>
<tr>
<td>3-5</td>
<td>Pairs</td>
<td class="td_price"><span class="price">$4.99</span></td>
<td class="save_red">45%</td>
</tr>
<tr>
<td>6-11</td>
<td>Pairs</td>
<td class="td_price"><span class="price">$4.49</span></td>
<td class="save_red">51%</td>
</tr>
<tr>
<td>12-23</td>
<td>Pairs</td>
<td class="td_price"><span class="price">$3.99</span></td>
<td class="save_red">56%</td>
</tr>
<tr>
<td>24+</td>
<td>Pairs</td>
<td class="td_price"><span class="price">$3.90</span></td>
<td class="save_red">57%</td>
</tr>
</tbody>
</table>
here is input field
<label for="">Enter Quantity</label>
<input type="text" name="qty" id="qty"></input>
i have tried some code but still no luck..

Try adding data attributes holding the price limits on each td contains the price limits:
$(document).on('input', '#qty', function() {
var that = $(this);
var val = that.val();
if (!isNaN(val)) {
$('.limitTd').each(function() {
var thatTd = $(this);
//var from = parseInt(thatTd.attr('data-from'));
//var to = parseInt(thatTd.attr('data-to'));
var lim = thatTd.html().toString().split('-');
if (lim.indexOf('-') != -1) {
var from = parseInt(lim[0]);
var to = parseInt(lim[1]);
} else {
var from = parseInt(lim.toString().replace('+'));
var to = 9999999;
}
console.log(lim);
if ((val >= from) && (val <= to)) {
var save = thatTd.closest('tr').find('.save_red').html();
$('#saveDiv').html(save);
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="attribute_table">
<tbody>
<tr>
<th>Buy</th>
<th>Unit</th>
<th>Price/unit</th>
<th class="save_red">Save</th>
</tr>
<tr>
<td class="limitTd" data-from="3" data-to="5">3-5</td>
<td>Pairs</td>
<td class="td_price"><span class="price">$4.99</span></td>
<td class="save_red">45%</td>
</tr>
<tr>
<td class="limitTd" data-from="6" data-to="11">6-11</td>
<td>Pairs</td>
<td class="td_price"><span class="price">$4.49</span></td>
<td class="save_red">51%</td>
</tr>
<tr>
<td class="limitTd" data-from="12" data-to="23">12-23</td>
<td>Pairs</td>
<td class="td_price"><span class="price">$3.99</span></td>
<td class="save_red">56%</td>
</tr>
<tr>
<td class="limitTd" data-from="24" data-to="99999">24+</td>
<td>Pairs</td>
<td class="td_price"><span class="price">$3.90</span></td>
<td class="save_red">57%</td>
</tr>
</tbody>
</table>
<label for="">Enter Quantity</label>
<input type="text" name="qty" id="qty"></input>
<div id="saveDiv" style="border:1px solid #d8d8d8;width: 100px;height:50px;float:left"></div>
ALTERNATIVE (No data attributes)
If you don't want to use data attributes, you must manipulate the html to extract the price limits.
For example:
var lim = $('.limitTd').html().split('-');
var from = lim[0];
var to = lim[1];

var mapUnits = [];
$('tr').each(function(i) {
if (!$(this).find("td:nth-child(1)")[0]) {
return;
}
var units = $(this).find("td:nth-child(1)")[0].innerText;
var saveperc = $(this).find("td:nth-child(4)")[0].innerText;
var splits = units.split('-');
var range1 = parseInt(splits[0]);
var range2 = parseInt(splits[1] ? splits[1] : 10000);
mapUnits.push({
range1: range1,
range2: range2,
saveperc: saveperc
})
});
$("#qty").keyup(function() {
$('#saveperc').html('');
var val = $("#qty").val();
for (var m in mapUnits) {
if (mapUnits[m].range1 <= val && mapUnits[m].range2 >= val) {
$('#saveperc').html(mapUnits[m].saveperc);
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="attribute_table">
<tbody>
<tr>
<th>Buy</th>
<th>Unit</th>
<th>Price/unit</th>
<th class="save_red">Save</th>
</tr>
<tr>
<td>3-5</td>
<td>Pairs</td>
<td class="td_price"><span class="price">$4.99</span>
</td>
<td class="save_red">45%</td>
</tr>
<tr>
<td>6-11</td>
<td>Pairs</td>
<td class="td_price"><span class="price">$4.49</span>
</td>
<td class="save_red">51%</td>
</tr>
<tr>
<td>12-23</td>
<td>Pairs</td>
<td class="td_price"><span class="price">$3.99</span>
</td>
<td class="save_red">56%</td>
</tr>
<tr>
<td>24+</td>
<td>Pairs</td>
<td class="td_price"><span class="price">$3.90</span>
</td>
<td class="save_red">57%</td>
</tr>
</tbody>
</table>
<label for="">Enter Quantity</label>
<input type="number" name="qty" id="qty"></input>
<div id='saveperc'></div>
If you cant change the Html, do like this.

Try with -
$('#qty').on('keyup', function() {
var trs = $('table.attribute_table').find('tr:not(:first)');
var val = trs.find('td:first').text();
values = val.split('-');
if ($(this).val() >= values[0] && $(this).val() <= values[1]) {
var dis = trs.find('td.save_red').text();
alert(dis);
}
})