검색 표 javascript

Question

표에서 random ID 열을 검색하려면 어떻게해야합니까? unique ID 열의 값만 검색 할 수 있습니다. 무엇이 오류 인 것 같습니까?

샘플 코드 :

<table> 
     <tr><th>Unique ID</th><th>Random ID</th></tr> 
     <tr><td>214215</td><td>442</td></tr> 
     <tr><td>1252512</td><td>556</td></tr> 
     <tr><td>2114</td><td>4666</td></tr> 
     <tr><td>3245466</td><td>334</td></tr> 
     <tr><td>24111</td><td>54364</td></tr> 
    </table> 
    <br /> 
    <input type="text" id="search" placeholder=" live search"></input> 


$("#search").on("keyup", function() { 
    var value = $(this).val(); 

    $("table tr").each(function(index) { 
     if (index !== 0) { 

      $row = $(this); 

      var id = $row.find("td:first").text(); 

      if (id.indexOf(value) !== 0) { 
       $row.hide(); 
      } 
      else { 
       $row.show(); 
      } 
     } 
    }); 
}); 

Answer 1

당신은 두 번째 TD를 얻을 수 :nth-child(2) 대신 :first를 사용할 필요가 아닌 첫 번째 :

대한 추가 정보를 원하시면 here

$("#search").on("keyup", function() { 
    var value = $(this).val(); 

    $("table tr").each(function(index) { 
     if (index !== 0) { 

      $row = $(this); 

      var id = $row.find("td:nth-child(2)").text(); 

      if (id.indexOf(value) !== 0) { 
       $row.hide(); 
      } 
      else { 
       $row.show(); 
      } 
     } 
    }); 
}); 

Answer 2

사용 nth-child 특성 .

$("#search").on("keyup", function() { 
 
    var value = $(this).val(); 
 

 
    $("table tr").each(function(index) { 
 
     if (index !== 0) { 
 

 
      $row = $(this); 
 

 
      var id = $row.find("td:nth-child(2)").text(); 
 

 
      if (id.indexOf(value) !== 0) { 
 
       $row.hide(); 
 
      } 
 
      else { 
 
       $row.show(); 
 
      } 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
     <tr><th>Unique ID</th><th>Random ID</th></tr> 
 
     <tr><td>214215</td><td>442</td></tr> 
 
     <tr><td>1252512</td><td>556</td></tr> 
 
     <tr><td>2114</td><td>4666</td></tr> 
 
     <tr><td>3245466</td><td>334</td></tr> 
 
     <tr><td>24111</td><td>54364</td></tr> 
 
    </table> 
 
    <br /> 
 
    <input type="text" id="search" placeholder=" live search"></input>