从jQuery中的一系列值获取数据

时间:2019-06-01 08:52:56

标签: jquery

我正在尝试根据用户输入的内容获取一系列数字。 我有customer.js,其中包含客户名称和鞋子的尺码,而我希望获得的鞋子尺码范围取决于 用户输入的内容。

例如。用户将第一个文本框5放入第二个文本框9中,我希望客户介于5到9之间, 而且还包括要显示的5和9。

我只了解到这一点。

我的html

<form id="shoe_size">
    <label for="size">Enter sizes</label>
    <input type="text" name="size1" class="size1">
    <input type="text" name="size2" class="size2">
    <input type="submit" value="Search" class="submit">
</form>

我的jQuery

$('#shoe_size').on('submit', function(){
    var size1 = $('.size1').val();
    var size2 = $('.size2').val();

    $('.table tr').each(function(){
        var size = 'false';
        $(this).each(function(){
            if(size1 <= size2){
                found = 'true';
            }
        })

        if(size == 'true'){
            $(this).show();
        }else{
            $(this).hide();
        }
    });
});

3 个答案:

答案 0 :(得分:0)

好吧,我正在重新创建您的问题并解决它(因为您的问题尚不清楚|请给我您的表,我将尝试根据它进行编码。直到现在我使用的是示例表)
你有这样一张桌子。

table to search

<table>
  <tr size="10" >
    <td>...</td>
    <td>...</td>
  </tr>
  <tr size="11" >
    <td>...</td>
    <td>...</td>
  </tr>
  <tr size="12" >
    <td>...</td>
    <td>...</td>
  </tr>
  <tr size="13" >
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr size="14" >
    <td>...</td>
    <td>...</td>
  </tr>
</table>

让我们的用户提交了您的表格以获取
任意大小范围内的值

Jquery

$('#shoe_size').on('submit', function(){
  var size1 = $('.size1').val();
  var size2 = $('.size2').val();

  $("table tr").each(function(){
     var tr_size = $(this).attr("size");
     if(tr_size >= size1 && tr_size <= size2){
         $(this).show();
     }else{
         $(this).hide();
     }
  });
});

答案 1 :(得分:0)

我知道,问题已被回答。我只是想在没有提交按钮的情况下以一种短一些的方式玩耍:

// quickly generate some sample data ...
var shoes=[[4,'wht','dda'],
[4,'red','aaa'],[7,'blk','aba'],
[5,'blu','ca'],[4,'red','db'],
[9,'grn','z'],[8,'yel','g']];
$('.shoetable tbody').append('<tr><td>'
+shoes.map(sh=>sh.join('</td><td>')).join('</td></tr><tr><td>')+'</td></tr>');

// and now: do the magic ...
$('input').keyup(()=>{
  var mi=$('.size1').val()-0||0;
  var ma=$('.size2').val()-0||1000;
  $('.shoetable tbody tr:gt(0)').each((i,tr)=>{
      var s=$('td:eq(0)',tr).text()-0;
      $(tr).toggle(s>=mi&&s<=ma);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="shoe_size">
<label for="size">Show sizes between</label>
<input type="text" name="size1" class="size1" size="3"> and
<input type="text" name="size2" class="size2" size="3">
</form>
<table class="shoetable"><tr>
 <th>size</th><th>color</th><th>model</th>
</tr></table>

答案 2 :(得分:-1)

据我所知,您应该更改以下行

found = 'true';

size = 'true'

因为稍后您要在代码中检查size == 'true',并且代码中的任何地方都没有声明found