在具有行输入的表中搜索

Question

我正在开发一个新的网络应用程序，其中包含多个包含不同信息的表格。 有一些表，我只显示信息，但还有其他表，我需要用户可以修改值。我总是使用在简单表格中运行良好的代码，但在带有输入的表格中则不起作用。

我总是使用此脚本代码来搜索表中的值，它会过滤结果并仅显示包含输入值的行。

$(document).ready(function(){
    $("#inputsearch").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#bodytableresults tr").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
    });
});

<table>
    <thead>
        <tr>
            <th><input type="text" placeholder="Search...." id="inputsearch"></th>
        </tr>
    </thead>
    <tbody id="bodytableresults">
        <tr>
            <th>Mike<th>
        </tr>
        <tr>
            <th>Joan<th>
        </tr>
    </tbody>
</table>

它在一个简单的表格中工作正常，但如果我在单元格中有输入，它就不起作用。 例如

<table>
    <thead>
        <tr>
            <th><input type="text" placeholder="Search...." id="inputsearch"></th>
        </tr>
    </thead>
    <tbody id="bodytableresults">
    <tr>
        <th><input type="text" value="Mike"></th>
    </tr>
    <tr>
       <th><input type="text" value="Joan"></th>
    </tr>
    </tbody>
</table>

可以过滤其中包含输入的行吗？我的意思是，在表上不同输入中搜索值

编辑： 这是我的桌子的照片。 所有单元格都有输入，用户必须修改它们 在此输入图片描述

然后，当我过滤时，这就是我想要的 在此输入图片描述

但是什么也没发生..

Answer 1

由于您在整个

.text()

上使用

<tr>

，因此值得强调该函数实际上将返回什么。它不关注元素文本内容，而是关注其所有子元素组合的文本内容。它当然不适用于实际上没有文本内容但有

input

集（作为它们的属性/属性）的嵌套

value

元素。

https://api.jquery.com/text/

获取匹配集合中每个元素的组合文本内容 元素，包括它们的后代，或设置文本内容 匹配的元素。

https://api.jquery.com/val/#val

获取匹配集合中第一个元素的当前值 元素。 .val()方法主要用于获取表单元素的值 例如输入、选择和文本区域。当调用空时 集合，它返回未定义。

通过执行

$(this).find('input').val()

，只需获取要迭代的行中包含的单个输入元素的确切值，就可以轻松解决问题中描述的特定场景。但需要强调的是，通过这样做，目标将是该唯一值而不是整行！

//$(this).find('input').val().toLowerCase()

//it will return the text content of a given row (even if it contains input elements)
//WITH CAVEATS!
function grabRowText(row){
  //if the row contains <input>
  if ($(row).find('input').length > 0) {
    //returns ONLY the value of the FIRST input element found in the row
    return $(row).find('input').val();    
  }
  //otherwise
  else{
    //return the text content of the whole row (as the text contained in all its children)
    return $(row).text();
  }
}

$(document).ready(function(){
    $("#inputsearch").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#bodytableresults tr").filter(function() {
          const rowText = grabRowText($(this)).toLowerCase();          
          $(this).toggle(rowText.indexOf(value) > -1)
        });
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<table>
  <thead>
    <tr>
      <th><input type="text" placeholder="Search...." id="inputsearch"></th>
    </tr>
  </thead>
  <tbody id="bodytableresults">
    <tr>
      <th><input type="text" value="Mike"></th>      
    </tr>
    <tr>
      <th><input type="text" value="Joan"></th>      
    </tr>
  </tbody>
</table>