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>