使用$(#table tbody tr).filter时，$(this).text()无法获取<input>值的问题

问题描述 #

开发文本框输入过滤表格内容功能时，发现keyup事件无法过滤表格中Metric Alias列的<input type='text'>元素值，原因是$(this).text()无法获取输入框的内容，导致过滤逻辑失效。

现有代码 #

HTML代码 #

<div style="overflow: auto;">
     <div style="margin: 20px; display: flex; justify-content: space-around;">
          <span>Product: <span id="btnawfproduct"></span></span>
          <div>Filter: <input id="filteraliasdesc" type="text"></div>
          <button id = "btnupdatealiasdesc" class="btn btn--dark">Update All</button>
     </div>
     <table id="editaliastable" style="table-layout: fixed; width: 100%;">
        <thead>
             <tr>
                  <th>Metric</th>
                  <th>Metric Alias</th>
                  <th>Metric Description</th>
             </tr>
        </thead>
     </table>
</div>

JavaScript代码 #

$(document).on('keyup', '#filteraliasdesc', function(){
    var searchText = $(this).val().toLowerCase();
    $('#editaliastable tbody tr').filter(function(){
      var rowText = $(this).text().toLowerCase();
      console.log('rowText --> ', rowText) // 无法获取input的value值
      if(rowText.indexOf(searchText) === -1){
            $(this).hide();
        } else {
            $(this).show();
        }
    });
});

$(document).on("click", ".editaliasdesc", function () {
    const table = $('#editaliastable');
    $('#btnawfproduct').text(awf_metric_alias[0]['productname']);
    var metric_alias = awf_metric_alias[1]['metric_alias'];
    var table_rows = ''
    for(var i = 0; i < metric_alias.length; i++)
        table_rows += `<tr>
                        <td><input type='checkbox' class ="chkupdatealias" style='transform: scale(1.5);'>${metric_alias[i].metric}</td>
                        <td><input type='text' style='width: 100%;' value = '${metric_alias[i].metric_alias}'></td>
                        <td><textarea style='width: 100%;'>${metric_alias[i].description}</textarea></td>
                     </tr>`;
    table.append('<tbody>' + table_rows + '</tbody>');
});

解决方案 #

核心问题是$(this).text()仅能获取元素的文本节点内容，无法读取表单元素（input、textarea）的value值。需要修改过滤逻辑，手动收集行内所有表单元素的当前值，与行文本拼接后再进行匹配：

修改后的keyup事件处理函数：

$(document).on('keyup', '#filteraliasdesc', function(){
    var searchText = $(this).val().toLowerCase();
    $('#editaliastable tbody tr').filter(function(){
        // 先获取行内基础文本内容
        let rowText = $(this).text().toLowerCase();
        // 追加行内所有输入框、文本域的当前值
        $(this).find('input[type="text"], textarea').each(function() {
            rowText += ' ' + $(this).val().toLowerCase();
        });
        // 使用toggle简化显示/隐藏逻辑
        $(this).toggle(rowText.indexOf(searchText) !== -1);
    });
});

说明 #

1. 通过find('input[type="text"], textarea')定位行内所有需要过滤的表单元素；
2. 遍历这些元素，将它们的当前value值追加到rowText中；
3. 使用toggle()方法替代原有的if-else判断，简化代码逻辑。

内容的提问来源于stack exchange，提问作者Surendranatha Reddy T