Таблица фильтра JQuery, но исключить один столбец

Question

Я использую скрипт, который я нашел для поиска в своей таблице и показываю только те строки, которые содержат строки, соответствующие тексту в поле ввода поиска.

      $("#searchfahrzeuge").keyup(function(){

      $("#fahrzeugliste").find("tr").hide();
      var data = this.value.split(" ");
      var jo = $("#fahrzeugliste").find("tr");


      $.each(data, function(i, v){
          jo = jo.filter("*:containsIgnoreCase('"+v+"')");
        console.log(jo);
      });

      jo.show(); });

Но теперь я хочуисключить два столбца таблицы, у них обоих есть класс ".nosearch", но я не знаю, как это сделать ...

Я пытался:

var jo = $("#fahrzeugliste").find("tr:not(.nosearch)");

итакже в функции фильтра:

jo = jo.filter("*:not(.nosearch):containsIgnoreCase('"+v+"')");

, но оба не работают.

Answer 1

Вы не предоставили свой HTML, но я предполагаю, что класс находится на td. Это ваша проблема, фильтрация выполняется на уровне tr, поэтому :not применяется к tr, который не имеет класса.

Я бы изменил его для фильтрации по td s, а не tr элементам. Примерно так (не проверено):

  var jo = $("#fahrzeugliste").find("tr > td");

  $.each(data, function(i, v){
      jo = jo.filter(":not(.nosearch):containsIgnoreCase('"+v+"')");
  });

  jo.parent().show(); // show the tr's for all matched tds

Answer 2

Попробуй это. Я столкнулся с подобной проблемой некоторое время назад. это решение, что я могу придумать. это не так уж и красиво, но это работает.

<input id="searchfahrzeuge" placeholder="Search for" >

<table id='fahrzeugliste'>

       <tr><th>First Name</th><th>Last Name</th><th>Email</th></tr>

    <tbody>

       <tr><td>Adykn</td><td>Lovejoy</td><td class='nosearch'>Me@lovejoy.com</td></tr>

       <tr><td>Adam</td><td>Smith</td><td class='nosearch'>Adam@lovejoy.com</td></tr>

       <tr><td>Joe</td><td>Eddie</td><td class='nosearch'>Eddie@lovejoy.com</td></tr>

    </tbody>  

</table>

---

<script> 
  $(document).ready(function () {
                       $('#searchfahrzeuge').keyup(function() {
                        var that = this;

                        var tableBody = $('#fahrzeugliste tbody');
                        var tr = $('#fahrzeugliste tbody tr');
                        $('.search-sf').remove();
                        $("#fahrzeugliste tr td:not(.nosearch)").each(function (i,val) {
                            var tableRowsClass = $(this).closest('tr');


                            var rowText = $(val).text().toLowerCase();
                            var inputText = $(that).val().toLowerCase();

                            if (inputText !== '') {
                                $('.search-query-sf').remove();
                                tableBody.prepend('<tr class="search-query-sf"><td colspan="3"><strong>Searching for: "' +$(that).val() +'"</strong></td></tr>');
                            } else {
                                $('.search-query-sf').remove();
                            }

                            if (rowText.indexOf(inputText) === -1) {
                                tableRowsClass.hide();
                            } else {
                                $('.search-sf').remove();
                                $('.dtrc').hide();
                                tableRowsClass.show();
                            }
                        });

                        if (tr.children(':visible').length === 0) {
                            tableBody.append('<tr class="search-sf"><td class="text-muted" colspan="3">No entries found.</td></tr>');
                        }
                    });
                });
</script>

Answer 3

А как насчет пользовательской функции для фильтра

var jo = $("#fahrzeugliste tr")
.filter(":containsIgnoreCase('"+v+"')")
.filter(function(i){
    if(!$(this).children('td').hasClass('nosearch'))
    return $(this);
});

Как этот . Может быть полезно, когда вам действительно нужны строки.

Answer 4

Вы всегда можете просто запустить поиск, который у вас есть, а затем просто использовать

$('.nosearch').hide();

впоследствии, вместо того, чтобы пытаться сделать ваш запрос слишком сложным.