Filtre tablosunu kullanarak <select> giriş jQuery kullanarak

Question

Bir tabloyu jQuery ile alfabetik <select> giriş filtrelemeye çalışıyorum.

Tablonun iki sütununda ad ve soyadlarım var ve satırları bunlardan biri ile filtrelemek istiyorum.

<select> 
    <option value="A">A</option> 
    <option value="B">B</option> 
    <option value="C">C</option> 
    ... 
</select> 

ve ben bu tabloyu filtreleme yapmak istediğiniz:

Ben seçilmiş bir giriş şekilde kurdunuz

<tr> 
    <td>Joe</td> 
    <td>Schmoe</td> 
    <td>$2482.79</td> 
    <td>172.78.200.124</td> 
    <td>http://gmail.com</td> 
</tr> 
<tr> 
    <td>John</td> 
    <td>Doe</td> 
    <td>$2776.09</td> 
    <td>119.232.182.142</td> 
    <td>http://www.example.com</td> 
</tr> 

nasıl jQuery kullanarak tabloya filtre hakkında gitmek?

Answer 1

Bu, yalnızca bir tanesini seçin ve bu ile geldi

$(document).ready(function($) { 
    var rows = $('table tr').each(function() { 
     var row = $(this); 
     var columns = row.children('td'); 

     row.data('name-chars', [ 
      columns.eq(0).html()[0].toUpperCase(), 
      columns.eq(1).html()[0].toUpperCase(), 
     ]); 
    }); 

    $('select').change(function() { 
     var char = $(this).val().toUpperCase(); 

     rows.each(function() { 
      var row = $(this); 
      var chars_to_match = row.data('name-chars'); 
      if($.inArray(char, chars_to_match) > -1) { 
       row.show(); 
      } 
      else { 
       row.hide(); 
      } 
     }); 
    }); 
}); 

Answer 2

Bunu deneyin. Gerekirse y ($) ile y (y).

$('tr').hide(); 
$('select').change(function(){ 
    var letter = $(this).val(); 
    var dataset = $('#tableID').find('td'); 
    $.each(dataset, function(x, y){ 
     if(y.substr(0,1) == letter){ 
      y.parent().show(); 
     } 
    }); 
}); 

Düzenleme

@SolutionYogi. Haklısın. Bu satırın şu şekilde yeniden yazılabileceğini tahmin ediyorum:

Bunu asla denemediniz. 2

DÜZENLEME Bu test etti. Umarım yeterince zariftir ve daha fazla hatam yok.

$('tr').hide(); 
$('select').change(function(){ 
    var letter = $(this).val(); 
    var dataset = $('#tableID').find('tr'); 
     $.each(dataset, function(x, y){ 
      var data = $(y).children().slice(0,2); 
       $.each(data, function(a, b){ 
        if($(b).html().substr(0,2) == letter){ 
         $(b).parent().show(); 
        } 
      }); 
     }); 
}); 

Answer 3

tablonuzun kimliği sel ise, ve tablo bu hile olacaktır, sekme olduğunu. Bakılacak sütunu değiştirmek için eq (0)'u değiştirin. Seç kutusundaki boş bir değer, tüm tr'leri yeniden gösterecektir.

var selSelection = $("#sel").val(); 
if(!selSelection) $("#tab tr").show(); 
else $("#tab tr").show().filter(function(index){ 
    return $("td:eq(0)", this).html().indexOf(selSelection) == -1; 
}).hide(); 

Answer 4

sizin örnekteki gibi stuctured edilir bir tablo var varsayarak çalışacaktır. Elzo'nun neye benzediğine oldukça benziyor, ancak masanın ilk iki sütununa sınırlıyor.

$('select').change(function(e) { 
    var letter = $(this).val(); 
    if (letter === 'ALL') { 
     $ ('tr').show(); 
    } 
    else { 
     $('tr').each(function(rowIdx,tr) { 
      $(this).hide().find('td').each(function(idx, td) { 
       if(idx === 0 || idx === 1) { 
        var check = $(this).text(); 
        if (check && check.indexOf(letter) == 0) { 
         $(tr).show(); 
        } 
       } 
      });    

     }); 
    }    
}); 

Davayı görmezden ve seçme birine sahip ve sayfada yalnızca tr en filtrelemek istediğiniz olanlardır varsayar etmez.

EDIT Satırları tekrar göstermek için bir 'TÜM' seçeneği eklendi.

Answer 5

$ ("td: değil (: içerir ('" + input_value + "'))") remove();

Bu büyük/küçük harfe duyarlıdır ... özellikle filtrelemeye ne çalışıyorsunuz?