Bảng lọc từ <select> đầu vào bằng cách sử dụng jQuery

Question

Tôi đang cố lọc một bảng từ đầu vào theo thứ tự bảng chữ cái <select> với jQuery.

Tôi có tên và họ trong hai cột của bảng và tôi muốn lọc các hàng theo một trong hai cột này.

tôi có một lựa chọn đầu vào thiết lập như vậy:

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

và tôi muốn lọc bảng này:

<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> 

Làm thế nào tôi sẽ đi về lọc các bảng sử dụng jQuery?

Answer 1

này sẽ làm việc giả sử bạn chỉ có một lựa chọn và một bảng được stuctured như ví dụ của bạn

$(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

Hãy thử điều này. Nếu y thay thế cần thiết với $ (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(); 
     } 
    }); 
}); 

Sửa

@SolutionYogi. Bạn đúng rồi. Tôi đoán dòng này có thể được viết lại là:

var dataset = $('#tableID').find('tr').children('td').slice(0,1); 

Không bao giờ thử điều đó.

EDIT 2

Tôi thử nghiệm này. Tôi hy vọng là đủ thanh lịch là tốt và tôi không có nhiều lỗi hơn.

$('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

Nếu id của bảng của bạn là sel, và bàn là tab, điều này sẽ làm các trick. Thay đổi eq (0) để thay đổi cột cần xem. Giá trị trống trong hộp chọn sẽ hiển thị lại tất cả các tr.

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

tôi đến với điều này. Khá giống với những gì Elzo đã đưa ra nhưng nó giới hạn nó thành hai cột đầu tiên của bảng.

$('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(); 
        } 
       } 
      });    

     }); 
    }    
}); 

Nó không bỏ qua trường hợp và giả định bạn có một lựa chọn và tr duy nhất trên trang là trang bạn muốn lọc.

EDIT Đã thêm tùy chọn 'TẤT CẢ' để hiển thị lại hàng.

Answer 5

$ ("td: not (: contains ('" + input_value + "'))"). Remove();

Đây là trường hợp nhạy cảm ... bạn đang cố gắng lọc cụ thể những gì?