jQuery 테이블 행 필터링 (열로 정렬)

Question

나는 지능적인 방식으로 테이블 행을 필터링하려고하는데 (결국 작업을 수행하는 코드 톤이 아니라), 오히려 영감을 얻지 못합니다.

테이블에 5 개의 열이 있습니다. 각각의 맨 위에는 사용자가 테이블 데이터를 필터링 할 수있는 드롭 다운 또는 텍스트 상자가 있습니다 (기본적으로 적용되지 않는 행은 숨김).

jQuery를위한 많은 테이블 필터링 플러그인이 있지만 작동하지 않습니다. 꽤 이것을 좋아하고, 복잡한 부분이 있습니다 : |

Answer 1

기본 필터 예제 그것은 JQuery와 선택기를 사용 http://jsfiddle.net/urf6P/3/

입니다 : not (: contains ('some text'))를 사용하여 각 행을 표시할지 숨길 지 결정하십시오. 이것은 당신이 방향으로 갈 수 있습니다.

jsfiddle에서 HTML과 자바 스크립트를 포함 편집 :

$(function() {  
    $('#filter1').change(function() { 
     $("#table td.col1:contains('" + $(this).val() + "')").parent().show(); 
     $("#table td.col1:not(:contains('" + $(this).val() + "'))").parent().hide(); 
    }); 

}); 

Answer 2

이것은 최선의 방법은 아니지만 성능에 대해서는 잘 모르겠지만 각 열의 각 열에 열 식별자로 시작하는 ID를 붙인 다음 옵션을 사용하여 레코드 식별자와 같은 고유 번호 당신이 열 이름을 생산했고, 레코드 ID가 763 인 경우

예를 들어, 나는 다음과 같은 것을 할 것 :

​​<table id="table1"> 
    <thead> 
     <tr> 
      <th>Artist</th> 
      <th>Album</th> 
      <th>Genre</th> 
      <th>Price</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td id="artist-127">Red Hot Chili Peppers</td> 
      <td id="album-195">Californication</td> 
      <td id="genre-1">Rock</td> 
      <td id="price-195">$8.99</td> 
     </tr> 
     <tr> 
      <td id="artist-59">Santana</td> 
      <td id="album-198">Santana Live</td> 
      <td id="genre-1">Rock</td> 
      <td id="price-198">$8.99</td> 
     </tr> 
     <tr> 
      <td id="artist-120">Pink Floyd</td> 
      <td id="album-183">Dark Side Of The Moon</td> 
      <td id="genre-1">Rock</td> 
      <td id="price-183">$8.99</td> 
     </tr> 
    </tbody> 
</table> 

그런 다음 사용할 수있는 jQuery를하는의 시작을 기준으로 필터링하기 id. 당신이 아티스트의 열을 기준으로 필터링하려는 경우 예를 들어

는 : 포함 ('텍스트')과 : 여기

var regex = /Hot/; 
$('#table1').find('tbody').find('[id^=artist]').each(function() { 
    if (!regex.test(this.innerHTML)) { 
     this.parentNode.style.backgroundColor = '#ff0000'; 
    } 
}); 

Answer 3

단계 : 2는 쓰기에 다음과 같은 : 1은 .html 파일에

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.."> 

<table id="myTable"> 
    <tr class="header"> 
    <th style="width:60%;">Name</th> 
    <th style="width:40%;">Country</th> 
    </tr> 
    <tr> 
    <td>Alfreds Futterkiste</td> 
    <td>Germany</td> 
    </tr> 
    <tr> 
    <td>Berglunds snabbkop</td> 
    <td>Sweden</td> 
    </tr> 
    <tr> 
    <td>Island Trading</td> 
    <td>UK</td> 
    </tr> 
    <tr> 
    <td>Koniglich Essen</td> 
    <td>Germany</td> 
    </tr> 
</table> 

단계를 다음 쓰기 .js 파일

function myFunction() { 
    // Declare variables 
    var input, filter, table, tr, td, i; 
    input = document.getElementById("myInput"); 
    filter = input.value.toUpperCase(); 
    table = document.getElementById("myTable"); 
    tr = table.getElementsByTagName("tr"); 

    // Loop through all table rows, and hide those who don't match the search query 
    for (i = 0; i < tr.length; i++) { 
    td = tr[i].getElementsByTagName("td")[0]; 
    if (td) { 
     if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { 
     tr[i].style.display = ""; 
     } else { 
     tr[i].style.display = "none"; 
     } 
    } 
    } 
}