how to get value from table td using javascript

Question

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

What is your most promising code?

martin
– martin

2015-04-17 06:20:21 +00:00
Commented Apr 17, 2015 at 6:20 — martin
– martin, Commented Apr 17, 2015 at 6:20
Can you post a snapshot on your code?

Alvin Magalona
– Alvin Magalona

2015-04-17 06:27:28 +00:00
Commented Apr 17, 2015 at 6:27 — Alvin Magalona
– Alvin Magalona, Commented Apr 17, 2015 at 6:27

kapantzak · Accepted Answer · 2015-04-17 07:42:30Z

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

Thanks..its working..but i don't want to use data-from and data-to..any alternative for that..??

ibsenv · Accepted Answer · 2015-04-17 07:31:51Z

	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.

Sougata Bose · Accepted Answer · 2015-04-17 06:26:31Z

0

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

answered Apr 17, 2015 at 6:26

Sougata Bose

31.8k8 gold badges52 silver badges89 bronze badges

Collectives™ on Stack Overflow

how to get value from table td using javascript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related