CODEWITHSUNDEEP
javascriptjqueryhtml
Amir Iqbal
Amir Iqbal

Reputation: 881

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..

Upvotes: 3

Views: 2280

Answers (3)

kapantzak
kapantzak

Reputation: 11750

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];

Upvotes: 4

ibsenv
ibsenv

Reputation: 619

	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.

Upvotes: 1

Sougata Bose
Sougata Bose

Reputation: 31739

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);
    }
})

Upvotes: 0

Related Questions