検索テーブル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>