Question

我希望通过keyup函数输入使用jquery获取保存的值。我匹配值购买 ..表示值是否与值匹配（范围）购买 ..然后获取保存的值.. 例如，如果我在文本字段中输入3，则它从保存 45％获得值...如果我输入8则结果应为51％..输入15结果56％，依此类推。这里是图像链接，以便更好地理解。

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>

这里是输入字段

<label for="">Enter Quantity</label>
  <input type="text" name="qty" id="qty"></input>

我尝试了一些代码，但仍然没有运气..

Answer 1

尝试添加包含价格限制的每个td的数据属性包含价格限制：

$(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（无数据属性）

如果您不想使用数据属性，则必须操纵html以提取价格限制。

例如：

var lim = $('.limitTd').html().split('-');
var from = lim[0];
var to = lim[1];

Answer 2

	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>

如果您无法更改Html，请执行此操作。

Answer 3

尝试 -

$('#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);
    }
})

如何使用javascript从表td获取值

3 个答案: