필터 테이블 <select> 입력을 사용하여 jQuery

Question

알파벳순으로 표를 필터링하려고합니다. <select> 입력을 jQuery로 필터링합니다.

나는 테이블의 두 열에 성과 이름이 있는데,이 중 하나를 기준으로 행을 필터링하고 싶습니다.

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

나는이 테이블 필터링 싶습니다 :

나는 선택 입력 있도록 설정해야

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

가 어떻게 jQuery를 사용하여 테이블을 필터링에 대해 갈 것입니까?

Answer 1

이것은 단지 하나를 선택하고 나는이 함께했다

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

시도해보십시오. 필요한 경우 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(); 
     } 
    }); 
}); 

편집

@SolutionYogi. 당신 말이 맞아요.

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

그 생각 해본 적이 : 나는대로이 줄 rewriten 수있는 것 같아요. 2

편집 나는이 테스트. 나는 충분히 우아하고 또한 더 많은 오류가 없길 바랍니다.

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

는 테이블의 id는 셀프 경우, 테이블이이 트릭을 할 것입니다, 탭입니다. 검색 할 열을 변경하려면 eq (0)으로 변경하십시오. 선택 상자의 값이 비어 있으면 모든 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

귀하의 예제처럼 stuctured되어 하나 개의 테이블을 가정 작동합니다. Elzo가 생각해내는 것과 매우 비슷하지만 테이블의 처음 두 열로 제한됩니다.

대소 문자를 무시하지 않으며 하나의 선택 만 있고 페이지에서 유일한 tr 만 필터링한다고 가정합니다.

EDIT 행을 다시 표시하려면 '모두'옵션이 추가되었습니다.

Answer 5

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

대소 문자를 구별합니다 ... 구체적으로 필터링을 시도하고있는 것은 무엇입니까?