jQuery的使用索引來查找一個元素

Question

我想做一個搜索功能爲我的網站，我到達那裏;只是在選擇項目索引時遇到問題。

這是我ATM：

$(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：爲什麼它不工作任何想法？

問題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中的具有已知索引的項目。

您應該使用.eq()功能或只是方括號：

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

或

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

無論這些都會給定索引處從集合中選擇元素。

編輯：現在你已經提供了一個更完整的問題，它是一個更容易一點，看看你正在嘗試做的。我剛剛寫了這個，並且非常簡短地進行了測試。

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