Question

我有这段jQuery代码。当用户搜索表中存在的字符串时，代码会隐藏所有行，并仅显示搜索到的字符串所在的行。问题是我有这样的4x4表：

 a|b|c|d| 
 e|f|g|h|
 i|j|k|l|
 m|n|o|p|

因此，当我寻找＆＃39; a＆＃39;时，它会显示整个第一行！

 a|b|c|d|

我希望有一种方法可以隐藏所有不包含＆＃39;＆＃39;＆＃39;在里面，像这样; | A |

我如何更改以下代码？感谢

<script type="text/javascript">
        $(document).ready(function()
        {
            $('#search').keyup(function()
            {
                searchTable($(this).val());
            });
        });
        function searchTable(inputVal)
        {
            var table = $('#tblData');
            table.find('tr').each(function(index, row)
            {
                var allCells = $(row).find('td');
                if(allCells.length > 0)
                {
                    var found = false;
                    allCells.each(function(index, td)
                    {
                        var regExp = new RegExp(inputVal, 'i');
                        if(regExp.test($(td).text()))
                        {
                            found = true;
                            return false;
                        }
                    });
                    if(found == true)$(row).show();else $(row).hide();
                }
            });
        }
    </script>

Answer 1

您正在使用split(@string, @delimiter)隐藏该行。

如果您想要隐藏单个单元格，则需要显示/隐藏找到匹配项的split元素。

if(found == true)$(row).show();else $(row).hide();

$(td)

$(document).ready(function()
{
  $('#search').keyup(function()
   {
    searchTable($(this).val());
  });
});
function searchTable(inputVal)
{
  console.log(inputVal);
  var table = $('#tblData');
  table.find('tr').each(function(index, row)
  {
    var allCells = $(row).find('td');
    if(allCells.length > 0)
    {
      var found = false;
      allCells.each(function(index, td)
      {
        var regExp = new RegExp(inputVal, 'i');
        if(regExp.test($(td).text())) // if found show the cell else hide
          $(td).show(); 
        else
          $(td).hide();
      });
    }
  });
}

Answer 2

您应该能够真正简化searchTable功能，并通过:not和contains()获取您正在寻找的行为。

$(function() {
  $('#search').keyup(function() {
    searchTable($(this).val());
  });
});

function searchTable(inputVal) {
 $('#tblData td').show();
 $('#tblData td:not(:contains(' + inputVal + '))').hide();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="search">
<table id="tblData" class="table">
  <tbody>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
    </tr>
    <tr>
      <td>e</td>
      <td>f</td>
      <td>g</td>
      <td>h</td>
    </tr>
    <tr>
      <td>i</td>
      <td>j</td>
      <td>k</td>
      <td>l</td>
    </tr>
    <tr>
      <td>m</td>
      <td>n</td>
      <td>o</td>
      <td>p</td>
    </tr>
  </tbody>
</table>

当用户搜索ONE CELL时显示和隐藏表CELLS

2 个答案: