jQueryでインデックスを使用して要素を検索する

Question

私は自分のウェブサイトの検索機能を作成しようとしています。アイテムのインデックスを選択する際に問題が発生しただけです。

$(document).on('keyup', '.inputs input', function (event) { 
    var $inputVal = $(this).val(); 
    var $inputListVal = $(this).closest('tr').find('input').index(this); 
    var $trList = $(this).parent().parent().parent().children(); 
    $.each($trList, function(index) { 
    if (!$(this).hasClass('inputs') && !$(this).hasClass('first-item')) { 
     var tdList = $(this).children().index($inputListVal); <!-- This is whats not working ATM --> 
     console.log(tdList); 
    }; 
    }); 
}); 

質問1：なぜそれが働いていない上の任意のアイデア

これは私がATMを持って何ですか？

質問2：どのように私はそれの検索側を行うだろうか？例えば彼らがpiを入力すると、2文字（パイ、豚など）から始まるすべてのものが表示されますか？

<tr class="inputs"> 
     <th><input id="tick-all" type="checkbox" name="tick" value="download"></th> 
     <th><input class="small-input" type="text" name="box_number"></th> 
     <th><input class="md-input" type="text" name="client_name"></th> 
     <th><input class="md-input" type="text" name="make"></th> 
     <th><input class="small-input" type="text" name="qty"></th> 
     <th><input class="big-input" type="text" name="descnption"></th> 
     <th><input class="small-input" type="text" name="width"></th> 
     <th><input class="small-input" type="text" name="depth"></th> 
     <th><input class="small-input" type="text" name="height"></th> 
     <th><input class="md-input" type="text" name="colour"></th> 
     <th><input class="md-input" type="text" name="order_number"></th> 
     <th><input class="md-input" type="text" name="quality"></th> 
     <th><input class="big-input" type="text" name="picture"></th> 
     <th><input class="small-input" type="text" name="Order"></th> 
    </tr> 
    <?php 
     require_once('connent.php'); 

     $sql = "SELECT * FROM client_info"; 
     $result = mysqli_query($conn, $sql); 
     while ($row = mysqli_fetch_array($result)) { 
      echo "<tr>"; 
       echo "<td><input type='checkbox' name='download-tick' value='download'></td>"; 
       echo "<td>".($row['Box'])."</td>"; 
       echo "<td>".($row['Client'])."</td>"; 
       echo "<td>".($row['Make'])."</td>"; 
       echo "<td>".($row['Descnption'])."</td>"; 
       echo "<td>".($row['Width'])."</td>"; 
       echo "<td>".($row['Depth'])."</td>"; 
       echo "<td>".($row['Height'])."</td>"; 
       echo "<td>".($row['Colour'])."</td>"; 
       echo "<td>".($row['OrderNo'])."</td>"; 
       echo "<td>".($row['Quality'])."</td>"; 
       echo "<td>".($row['Picture'])."</td>"; 
       echo "<td>".($row['Order'])."</td>"; 
       echo "<td>23<br><input class='small-input' type='text' name='Order'></td>"; 
      echo "</tr>"; 
     } 
     //echo $count = mysqli_num_rows($result); 
    ?> 

Answer 1

.index()関数は、要素のインデックスを返すセレクタを取ります。この場合、$ inputListValに格納されている既知のインデックスを持つ項目を選択するように見えます。これらのどちらかが指定されたインデックスのコレクションから要素を選択します

var tdList = $(this).children().eq($inputListVal) 

または

var tdList = $(this).children()[$inputListVal] 

：

あなたは.eq()機能またはちょうど角括弧表記を使用する必要があります。

編集：これで、より完全な質問を提供しましたので、あなたがしようとしていることを少し見やすくなりました。私はすぐにこれを書いて、簡単にそれをテストしました。

$(document).on('keyup', '.inputs input', function (event) { 
 
    var searchTerm = $(this).val(); 
 
    var columnIndex = $(this).closest('th').index(); //Get the index of the current column 
 
    var $trList = $(this).parent().parent().siblings(); //Select all TR except this header row 
 
    $.each($trList, function() { 
 
     var $td = $(this).children().eq(columnIndex); //Get the right td 
 
     if (($td.text().indexOf(searchTerm) > -1) || searchTerm.length < 1) { //Check if the search term is in the td text 
 
      $(this).show(); 
 
     } else { 
 
      $(this).hide(); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr class="inputs"> 
 
     <th><input id="tick-all" type="checkbox" name="tick" value="download"></th> 
 
     <th><input class="small-input" type="text" name="box_number"></th> 
 
     <th><input class="md-input" type="text" name="client_name"></th> 
 
     <th><input class="md-input" type="text" name="make"></th> 
 
     <th><input class="small-input" type="text" name="qty"></th> 
 
     <th><input class="big-input" type="text" name="descnption"></th> 
 
     <th><input class="small-input" type="text" name="width"></th> 
 
     <th><input class="small-input" type="text" name="depth"></th> 
 
     <th><input class="small-input" type="text" name="height"></th> 
 
     <th><input class="md-input" type="text" name="colour"></th> 
 
     <th><input class="md-input" type="text" name="order_number"></th> 
 
     <th><input class="md-input" type="text" name="quality"></th> 
 
     <th><input class="big-input" type="text" name="picture"></th> 
 
     <th><input class="small-input" type="text" name="Order"></th> 
 
    </tr> 
 
    <tr> 
 
     <td><input type='checkbox' name='download-tick' value='download'></td> 
 
     <td>Box 1</td> 
 
     <td>Geoff Stains</td> 
 
     <td>Make One</td> 
 
     <td>3</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
    </tr> 
 
    <tr> 
 
     <td><input type='checkbox' name='download-tick' value='download'></td> 
 
     <td>Box 2</td> 
 
     <td>Andy Ball</td> 
 
     <td>Make Two</td> 
 
     <td>5</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
    </tr> 
 
    <tr> 
 
     <td><input type='checkbox' name='download-tick' value='download'></td> 
 
     <td>Box 3</td> 
 
     <td>Linda Smith</td> 
 
     <td>Make One</td> 
 
     <td>3</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
    </tr> 
 
    <tr> 
 
     <td><input type='checkbox' name='download-tick' value='download'></td> 
 
     <td>Box 4</td> 
 
     <td>Tom Hope</td> 
 
     <td>Make Three</td> 
 
     <td>2</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
    </tr> 
 
    <tr> 
 
     <td><input type='checkbox' name='download-tick' value='download'></td> 
 
     <td>Box 5</td> 
 
     <td>Steve Smith</td> 
 
     <td>Make Two</td> 
 
     <td>1</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
     <td>ipsum</td> 
 
    </tr> 
 
</table>