Изменение таблицы яваскрипта для поиска конкретных данных

Question

Форма поиска Я использую здесь: http://bootsnipp.com/snippets/featured/js-table-filter-simple-insensitive

Я нашел хороший JS форму поиска, созданную Cyruxx, что я реализую на моем сайте. Можно ли изменить этот код для поиска только определенных заголовков таблиц?

Например, у меня есть:

 <table class="table table-list-search"> 
       <thead> 
        <tr> 
         <th>id</th> 
         <th>name</th> 
         <th>address</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <td>107</td> 
         <td>John Doe</td> 
         <td>1074 example street</td> 
        </tr> 
        <tr> 
         <td>100</td> 
         <td>Henry</td> 
         <td>1111 example ave</td> 
        </tr> 
       </tbody> 
      </table> 

Как я могу изменить код только поиск столбца ID, например. Другими словами, при наборе номера «1» будут отображаться только строки таблицы с «1» в заголовке «id». Ввод «1074» в моем примере вернет 0 результатов, в то время как «1» отобразит оба списка.

$(document).ready(function() { 
    var activeSystemClass = $('.list-group-item.active'); 

    //something is entered in search form 
    $('#system-search').keyup(function() { 
     var that = this; 
     // affect all table rows on in systems table 
     var tableBody = $('.table-list-search tbody'); 
     var tableRowsClass = $('.table-list-search tbody tr'); 
     $('.search-sf').remove(); 
     tableRowsClass.each(function(i, val) { 

      //Lower text for case insensitive 
      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="6"><strong>Searching for: "' 
        + $(that).val() 
        + '"</strong></td></tr>'); 
      } 
      else 
      { 
       $('.search-query-sf').remove(); 
      } 

      if(rowText.indexOf(inputText) == -1) 
      { 
       //hide rows 
       tableRowsClass.eq(i).hide(); 

      } 
      else 
      { 
       $('.search-sf').remove(); 
       tableRowsClass.eq(i).show(); 
      } 
     }); 
     //all tr elements are hidden 
     if(tableRowsClass.children(':visible').length == 0) 
     { 
      tableBody.append('<tr class="search-sf"><td class="text-muted" colspan="6">No entries found.</td></tr>'); 
     } 
    }); 
}); 

Answer 1

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

Чтобы ответить на ваш вопрос, хотя, вы можете просто ограничить, какие столбцы будут доступны для поиска с классом CSS, и использовать этот класс как фильтр поиска:

так изменить

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

в

var rowText = $(val).find('.searchable').text().toLowerCase(); 

, а затем пометить все, что вы хотите, чтобы можно было найти:

<table class="table table-list-search"> 
      <thead> 
       <tr> 
        <th>id</th> 
        <th>name</th> 
        <th>address</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td class="searchable">107</td> 
        <td>John Doe</td> 
        <td>1074 example street</td> 
       </tr> 
       <tr> 
        <td class="searchable">100</td> 
        <td>Henry</td> 
        <td>1111 example ave</td> 
       </tr> 
      </tbody> 
     </table>