检查td是否包含文本？

我正在研究一个小项目，并且我需要隐藏表行的功能，如果它们的td.icaoIata不包含正在输入栏中输入的字符串。最重要的是，如果它们的data-属性位于Jquery滑块范围内，它们将被隐藏/显示。我工作的那部分，不应该是相关的。检查td是否包含文本？

基本上，如果找不到字符串，请隐藏该行。然后，一旦输入框被更新，再次检查，并隐藏/显示，如果仍然没有找到/发现。

我的烦恼主要是结合不同的功能，如find（），：contains等我无法一起工作。

我希望我很清楚。

任何人都可以指导我解决问题吗？

这是我的代码。非常感谢！

<input type="text" name="search" class="form-control searchinput" ><br> 
<div id="slider"></div> 
<div id="slider-value-lower"></div> 
<div id="slider-value-upper"></div> 
    <table class="table table-striped table-bordered"> 
     <thead> 
      <tr> 
       <th>Flight #</th> 
       <th>Departure</th> 
       <th>Arrival</th> 
       <th>Duration</th> 
       <th>Aircraft</th> 
       <th>Distance</th> 
       <th>Options</th> 
      </tr> 
     </thead> 
     <tbody class="schedules"> 
      <tr class="schedulerow" data-duration="1.4"> 
       <td><a href="">DLH1058</a></td> 
       <td class="icaoIata">Frankfurt Main <small>(EDDF)</small></td> 
       <td class="icaoIata">Cote D'Azur <small>(LFMN)</small></td> 
       <td> 1.4 h</td> 
       <td class="icaoIata"> 
        A320 
       </td> 
       <td>386 nm</td> 
       <td> 
        <a href="" class="btn btn-success">Book</a> 
       </td> 
      </tr> 
      ............ 

     </tbody> 
    </table>

而我的JS

var slider = document.getElementById('slider'); 

noUiSlider.create(slider, { 

    connect: true, 
    start: [0,3], 
    step: 0.5, 
    tooltips: true, 
    range: { 
     'min': 0, 
     'max': 20 
    } 
}); 
//initialize the values 
$(".schedules").children().hide().filter(function() { 
    var duration = $(this).data('duration'); 
    return duration >= 0 && duration <= 3; 
}).addClass('is-shown').show(); 

$(".searchinput").keyup(function() { 
    var content = $(".searchinput").val(); 
    //My mess was here.... 
}); 

slider.noUiSlider.on('change', function(values, handle) { 

    /*sliderValues[handle].innerHTML = values[handle];*/ 
    filterRows(values[0], values[1]); 
}); 

function filterRows(min, max) { 
    $(".schedules").children().removeClass('is-shown').hide().filter(function() { 
     var duration = $(this).data('duration'); 
     return duration >= min && duration <= max; 
    }).addClass('is-shown').show(); 
}

所以，

来源

2017-01-30 user3237838

其中'td.icaoIata'？我可以看到超过1个，如果我没有弄错 – guradio

请使用此插件尝试 https://datatables.net/ – Shibon

它应该搜索所有标记为icaoIata。 – user3237838

既然你已经应用可以从多个源（滑块和输入框）中设置的过滤器，我会保持在过滤器设置保存（也有用干设置一个单独的对象值）

例如

var filter ={ 
    min: 0, 
    max: 3, 
    text : '' 
};

其中min和max是持续时间，text是搜索文本。

的filterRows方法可以使用过滤器对象和不需要的参数：

function filterRows() { 
    $(".schedules").children().removeClass('is-shown').hide().filter(function() { 
     var duration = $(this).data('duration'); 
     return duration >= filter.min && duration <= filter.max 
      && (!filter.text || $(this).children('td.icaoIata').filter(function(){return $(this).text().toLowerCase().indexOf(filter.text) !== -1;}).length); 
    }).addClass('is-shown').show(); 
}

滑块和输入应设置适当的过滤器值，并调用filterRows方法。

例fiddle

来源

2017-01-30 11:17:15

我会尽力回报！ – user3237838

工程就像一个魅力。非常感激！ – user3237838

使用.filter()为。

var content = $(".searchinput").val(); 

$('.schedules tr') 
    .show() // first show all tr 
    .filter(function() { 
     // return only tr that does not contain "content" value 
     var match = false; 

     $(this).find('.icaoIata').each(function() { 
      if ($(this).text().toLowerCase().indexOf(content) == -1) { 
       match = true; 
      } 
     }); 

     return match; 
    }) 
    .hide();

来源

2017-01-30 10:29:43 Justinas

我会尽力回报。谢谢你的努力！ – user3237838

检查td是否包含文本？

回答

相关问题