I have a table which have a tbody and x number of rows containing persons and their ages like this..
<tbody>
<tr>
<td class="number">4</td>
<td class="name">Name</td>
<td class="age" data-date="2004-11-22 00:00:00">13</td>
</tr>
<tr>
<td class="number">5</td>
<td class="name">Name</td>
<td class="age" data-date="2003-11-22 00:00:00">14</td>
</tr>
I would like to display the correct age of all persons, but since this depends on the current date I'm thinking of entering the birthdate instead. But I still want to display the actual age of the player. How can I use a jQuery script that iterate all rows of the table and depending on the data-date value display the actual age in the corresponding td cell?
$('.age').each(function(i, e) {
var now = new Date();
var date = new Date(e.dataset.date);
$(this).html(now.getFullYear() - date.getFullYear());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td class="number">4</td>
<td class="name">Name</td>
<td class="age" data-date="2004-11-22 00:00:00"></td>
</tr>
<tr>
<td class="number">5</td>
<td class="name">Name</td>
<td class="age" data-date="2003-11-22 00:00:00"></td>
</tr>
</tbody>
</table>
Maybe something like this:
function getAge(dateString) {
var today = new Date();
var birthDate = new Date(dateString);
var age = today.getFullYear() - birthDate.getFullYear();
var m = today.getMonth() - birthDate.getMonth();
if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
return age;
}
$('.age').each(function(index){
$(this).html(getAge($(this).data('date')));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td class="number">4</td>
<td class="name">Name</td>
<td class="age" data-date="2004-11-22 00:00:00">13</td>
</tr>
<tr>
<td class="number">5</td>
<td class="name">Name</td>
<td class="age" data-date="2003-11-22 00:00:00">14</td>
</tr>
</tbody>
</table>
the getAge() function is stolen from here: https://stackoverflow.com/a/7091965/2008111 so maybe you follow that link and upvote also the answer there.
Your HTML page should be like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="persons">
<tbody>
<tr>
<td class="number">4</td>
<td class="name">Name</td>
<td class="age" data-date="2004-11-22 00:00:00"></td>
</tr>
<tr>
<td class="number">5</td>
<td class="name">Name</td>
<td class="age" data-date="2003-11-22 00:00:00"></td>
</tr>
</tbody>
</table>
The js side should look like this:
$(document).ready(function(){
$('.persons td.age').each(fucntion(){
var today = new Date();
var birthday = new Date($(this).attr('data-date'));
var ageDifMs = today - birthday.getTime();
var ageDate = new Date(ageDifMs);
$(this).html(Math.abs(ageDate.getUTCFullYear() - 1970));
});
});
Related
I have an table full of cells. And there is variable. Let's say the variable is dd = the current day and the table contains days from the current month. For instance, for July, the table cells are populated by numbers 1 to 30.
I want to be able to find the cell with the variable, and change the css of the cell with the variable. Say, if the variable is 10, on document.ready, all the cells should be searched for "10" and if there is a match, the css properties of that specific cell has to be changed.
Here's something I've tried:
var today = new Date();
var dd = today.getDate();
(".tcell").each(function (){
var curdate = $(this).find(dd).html();
var curd = $(this).find(dd).attr('id');
});
if (curdate = dd){
alert(curdate);
$(curd).css('color','red');
}
Why doesn't this work? It just alerts the date but doesn't do anything to the cell which has the text that is same as the variable.
PS: It's not about dates or days, but any table and/or variables.
Thank you.
Try this :
var today = new Date();
var dd = today.getDate();
$(".tcell").each(function (index, el){
var curdate = parseInt($(el).html());
if (curdate == dd){
alert(curdate);
$(el).css('color','red');
}
});
If it is working, the error was about scope.
Indeed, curdate is not defined outside the callback of the each function. Moreover, if curdate was global, the test would have been executed only for the last value and not for each iteration as it is outside of the callback function.
You can read more about scopes here : https://www.w3schools.com/js/js_scope.asp
Here's the code:
var today = new Date();
var dd = today.getDate();
document.querySelectorAll(".cell").forEach(function(cell) {
cell.classList.remove("active");
if (parseInt(cell.innerText) === parseInt(dd)) {
cell.classList.add("active");
}
});
.cell {
padding: 10px;
background: #ccc;
text-align: center;
}
.cell.active {
background: #CC0000;
color: #FFF;
font-weight: bold;
}
<table>
<tbody>
<tr>
<td class="cell">01</td>
<td class="cell">02</td>
<td class="cell">03</td>
<td class="cell">04</td>
<td class="cell">05</td>
<td class="cell">06</td>
<td class="cell">07</td>
</tr>
<tr>
<td class="cell">08</td>
<td class="cell">09</td>
<td class="cell">10</td>
<td class="cell">11</td>
<td class="cell">12</td>
<td class="cell">13</td>
<td class="cell">14</td>
</tr>
<tr>
<td class="cell">15</td>
<td class="cell">16</td>
<td class="cell">17</td>
<td class="cell">18</td>
<td class="cell">19</td>
<td class="cell">20</td>
<td class="cell">21</td>
</tr>
<tr>
<td class="cell">22</td>
<td class="cell">23</td>
<td class="cell">24</td>
<td class="cell">25</td>
<td class="cell">26</td>
<td class="cell">27</td>
<td class="cell">28</td>
</tr>
<tr>
<td class="cell">29</td>
<td class="cell">30</td>
</tr>
</tbody>
</table>
You can check on codepen.
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>
I have the following table:
<table>
<tr>
<th>Category</th>
<th>Value</th>
</tr>
<tr>
<td class="cat1">cat1</td>
<td class="value">123</td>
</tr>
<tr>
<td class="cat2">cat2</td>
<td class="value">356</td>
</tr>
<tr>
<td class="cat1">cat1</td>
<td class="value">486</td>
</tr>
</table>
I need a way to add/sum all values grouped by category, ie: add/sum all values in cat1, then add/sum all values in cat2. For each group I will do something with the total.
So I was hoping for something like:
for each unique category:
sum values in category
do something with this category total
For cat1 the total would be 123 + 486. Cat2 would just be 356. And so on if there were more categories.
I would prefer a purely javascript solution, but JQuery will do if that's not possible.
If I understand you correctly, you do a repeat of each td:first-child (The category cell).
Create a total object. You can check if the category is exist in it for each cell. If so, add current value to the stored value. If not, insert new property to it.
Like this:
var total = {};
[].forEach.call(document.querySelectorAll('td:first-child'), function(td) {
var cat = td.getAttribute('class'),
val = parseInt(td.nextElementSibling.innerHTML);
if (total[cat]) {
total[cat] += val;
}
else {
total[cat] = val;
}
});
console.log(total);
<table>
<tr>
<th>Category</th>
<th>Value</th>
</tr>
<tr>
<td class="cat1">cat1</td>
<td class="value">123</td>
</tr>
<tr>
<td class="cat2">cat2</td>
<td class="value">356</td>
</tr>
<tr>
<td class="cat1">cat1</td>
<td class="value">486</td>
</tr>
</table>
Here's a simple approach using only javascript
//grab data
var allTR = document.getElementsByTagName('TR');
var result = {};
//cycle table rows
for(var i=0;i<allTR.length;i+2){
//read class and value object data
var class = allTR[i].getAttribute('class');
var value = allTR[i+1].innerText;
//check if exists and add, or just add
if(result[class])
result[class] += parseInt(value);
else
result[class] = parseInt(value);
}
You have to use getElementsByTagName("td"); to get all the <td> collection and then you need to loop through them to fetch their innerText property which later can be summed up to get the summation.
Here is the working Fiddle : https://jsfiddle.net/ftordw4L/1/
HTML
<table id="tbl1">
<tr>
<th>Category</th>
<th>Value</th>
</tr>
<tr>
<td class="cat1">cat1</td>
<td class="value">123</td>
</tr>
<tr>
<td class="cat2">cat2</td>
<td class="value">356</td>
</tr>
<tr>
<td class="cat1">cat1</td>
<td class="value">486</td>
</tr>
<tr>
<td class="total"><b>Total</b></td>
<td class="totalValue"></td>
</tr>
</table>
Javascript
var tds=document.getElementsByTagName("td");
var total=0;
for (var i = 0; i<tds.length; i++) {
if (tds[i].className == "value") {
if(total==0) {
total = parseInt(tds[i].innerText);
} else {
total = total + parseInt(tds[i].innerText);
}
}
}
document.getElementsByClassName('totalValue')[0].innerHTML = total;
Hope this helps!.
here is a solution with jQuery :) if you are interested. it's pretty straightforward
var sumCat1 = 0;
var sumCat2 = 0;
$(".cat1 + .value").each(function(){
sumCat1 += parseInt($(this).text());
})
$(".cat2 + .value").each(function(){
sumCat2 += parseInt($(this).text());
})
console.log(sumCat1)
console.log(sumCat2)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>Category</th>
<th>Value</th>
</tr>
<tr>
<td class="cat1">cat1</td>
<td class="value">123</td>
</tr>
<tr>
<td class="cat2">cat2</td>
<td class="value">356</td>
</tr>
<tr>
<td class="cat1">cat1</td>
<td class="value">486</td>
</tr>
</table>
A simple approach in JQuery...
var obj = {};
$('tr').each(function() {
$this = $(this)
if ($this.length) {
var cat = $(this).find("td").first().html();
var val = $(this).find("td").last().html();
if (cat) {
if (!obj[cat]) {
obj[cat] = parseInt(val);
} else {
obj[cat] += parseInt(val);
}
}
}
})
console.log(obj)
In my HTML I have different times not always time difference 15 minutes. it is possible to make so that (when 8:00 clock is automatically reads the ID and the next ID makes bold (example 8:00 clock ist neu and bolld is next id with 8:02)
`
var currentDate = new Date();
var currentHour = currentDate.getHours();
var currentMinute = currentDate.getMinutes();
var minuteBin = currentMinute - (currentMinute % 15);
var idString = ""+currentHour+minuteBin;
console.log("Time =",currentHour,":",currentMinute,"bin =",minuteBin,"idString =",idString);
document.getElementById(idString).className = 'bold';
.bold {
font-weight:bold;
}
<table>
<tr id="2145">
<td>21:45</td>
<td>A</td>
</tr>
<tr id="2200">
<td>22:00</td>
<td>B</td>
</tr>
<tr id="2215">
<td>22:15</td>
<td>C</td>
</tr>
</table>
<table width="166">
<tbody>
<tr>
<td>NISJA</td>
<td>OPERATORI</td>
</tr>
<tr>
<td>06:50</td>
<td>BREST-TOURS-ZA</td>
</tr>
<tr>
<td>07:15</td>
<td>HALIMAJ-REISEN</td>
</tr>
<tr>
<td>07:50</td>
<td>DIDI-COMPANI</td>
</tr>
<tr>
<td>08:20</td>
<td>DRINI-REISEN</td>
</tr>
<tr>
<td>08:45</td>
<td>BASHKIMI-REISEN</td>
</tr>
<tr>
<td>09:05</td>
<td>FIDANI-TOURS</td>
</tr>
<tr>
<td>09:30</td>
<td>ZHUR-TOURS</td>
</tr>
<tr>
<td>09:55</td>
<td>MIR-TOURS</td>
</tr>
<tr>
<td>10:20</td>
<td>ATMAXHA</td>
</tr>
<tr>
<td>10:35</td>
<td>ARBËRIA-TOURS</td>
</tr>
<tr>
<td>11:00</td>
<td>SHPEJTIMI</td>
</tr>
<tr>
<td>11:20</td>
<td>SHARRI</td>
</tr>
<tr>
<td>11:45</td>
<td>HALIMAJ-REISEN</td>
</tr>
<tr>
<td>12:00</td>
<td>FATI-TOURS</td>
</tr>
<tr>
<td>12:10</td>
<td>BREST-ZAPLLUZHË</td>
</tr>
<tr>
<td>12:35</td>
<td>JETA</td>
</tr>
<tr>
<td>12:50</td>
<td>ERZA-ZAPLLUZHË</td>
</tr>
<tr>
<td>13:05</td>
<td>DIDI-COMPANI</td>
</tr>
<tr>
<td>13:30</td>
<td>DARDANI</td>
</tr>
<tr>
<td>14:00</td>
<td>BASHKIMI-REISEN</td>
</tr>
<tr>
<td>14:30</td>
<td>ZHUR-TOURS</td>
</tr>
<tr>
<td>14:45</td>
<td>TOSA-ZAPLLUZHË</td>
</tr>
<tr>
<td>14:55</td>
<td>NUHI-Q-GASHI</td>
</tr>
<tr>
<td>15:05</td>
<td>Op. nuk dihet</td>
</tr>
<tr>
<td>15:20</td>
<td>Op. nuk dihet</td>
</tr>
<tr>
<td>15:35</td>
<td>ATMAXHA</td>
</tr>
<tr>
<td>15:50</td>
<td>ARBËRIA-TOURS</td>
</tr>
<tr>
<td>16:10</td>
<td>SHPEJTIMI</td>
</tr>
<tr>
<td>16:25</td>
<td>MIR-TOURS</td>
</tr>
<tr>
<td>16:40</td>
<td>BRES TOUR</td>
</tr>
<tr>
<td>16:55</td>
<td>HALIMAJ-REISEN</td>
</tr>
<tr>
<td>17:15</td>
<td>SHPEJTIMI</td>
</tr>
<tr>
<td>17:35</td>
<td>SHARRI</td>
</tr>
<tr>
<td>17:55</td>
<td>JETA</td>
</tr>
<tr>
<td>18:15</td>
<td>BASHKIMI-REISEN</td>
</tr>
<tr>
<td>18:40</td>
<td>ZHUR-TOURS</td>
</tr>
<tr>
<td>18:55</td>
<td>TEUTA-MARKET</td>
</tr>
<tr>
<td>19:15</td>
<td>BRES-TOU-ZAPLL</td>
</tr>
<tr>
<td>19:45</td>
<td>DARDANI</td>
</tr>
<tr>
<td>20:10</td>
<td>ERZA</td>
</tr>
</tbody>
</table>
You want the next possible ID to light up, so we'll have to find out what that one is. Lets try the following:
First, get the current possible ID. You already have this. Except, you don't want to round this to 15. You want the current time so you can select any time you have an id for.
var currentTimeStamp = currentHour + '' + minutes;
Now we want to keep upping this id by 1 as long as it does not exist.
To prevent an infinite loop, also add a maximum amount we can count. If this id doesn't exist, document.getElementById will return undefined, which is false, so it will keep looping until either the currentTimeStamp is no longer smaller than our stopCounting value, or when getElementById is not undefined or false anymore. That result tells you the closest existing id.
var stopCounting = currentTimeStamp + 15;
while(
!document.getElementById(currentTimeStamp) &&
currentTimeStamp < stopCounting
){
currentTimeStamp++;
}
The while loop can end in one of two ways:
1) We found an element
2) We reached the maximum value we want to try (15 in this case)
So check if the element exists by checking getElement again, and defining it as false if not.
var selectedId = document.getElementById(currentTimeStamp) || false;
The last bit is to add your class if it exists (and therefor doesn't evaluate to false), otherwise we'll log an error message.
if(selectedId){
selectedId.className += "bold";
} else {
console.log("Could not find an id within 15 minutes of now.");
}
This is the whole process to use in your case. I don't know what you are trying to accomplish here, I have a slight feeling it's a complicated way to succeed. I think it might be better to use a data-attribute for this instead of an id, but okay.
Heres a fully functional snippet that searches for the next available id:
Updated
I've added a by-the-minute checker.
var current = false;
function check(){
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
document.getElementById("currentTime").innerHTML = hours + ":" + minutes;
var maximum = minutes + 15;
while(
!document.getElementById('q-' + minutes) &&
minutes < maximum
) {
minutes++;
}
var id = document.getElementById('q-' + minutes) || false;
// Remove any existing selected classes:
var all = document.querySelectorAll(".selected");
for(var i = 0; i < all.length; i++){
all.item(i).className = all.item(i).className.replace("selected", "");
}
if(id){
id.className = "selected";
}
// Run the function every 60 seconds
setTimeout(check, 1000 * 60);
}
// Start running the function
check();
.selected { color: red }
<div>Current time: <strong id="currentTime"></strong></div>
<br /><br />
<div id="q-0">The hour is coming up.</div>
<div id="q-15">A quarter past is coming up.</div>
<div id="q-30">Half past is coming up.</div>
<div id="q-45">A quarter to is coming up.</div>
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);
}
})