Suche Tabelle Javascript

Question

Wie kann ich nach der Spalte random ID in der Tabelle suchen, kann ich nur nach den Werten in der Spalte unique ID suchen. Was scheint der Fehler zu sein?

Beispielcode:

<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

Sie müssen :nth-child(2) verwenden statt :first die zweite td zu bekommen und nicht der erste:

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

Verwenden nth-child Eigenschaft .

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