How to get value from td table using javascript
I want to get the Save value using jquery via keyup function input. I match the value with Buy .. means the value matches the value (range) Buy .. then get the Save value . for example if I entered 3 in the textbox then it gets the value from Save 45% .. and if I entered 8 then the result should be 51% .. 15 the result is 56% and so on. here's an 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 the input field
<label for="">Enter Quantity</label>
<input type="text" name="qty" id="qty"></input>
I tried some code but still no luck ..
+3
source to share
3 answers
Try adding data attributes holding price limits on each td
contains 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 have to manipulate the html to extract price limits.
For example:
var lim = $('.limitTd').html().split('-');
var from = lim[0];
var to = lim[1];
+4
source to share
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 can't change the Html, do this.
+1
source to share
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);
}
})
0
source to share