Question

我正在开发一个包含实时搜索的网站。此实时搜索用于搜索联系人列表中的联系人（HTML表）。联系人列表是一个包含2列的表，每列包含一个联系人。搜索工作但是，它返回整行，而不仅仅是匹配的列。

这意味着如果我在下面的代码段中的表中搜索A;搜索返回整行（A || B），而不仅仅是A.有没有什么方法可以改进我的函数来搜索列而不是行？

希望我能清楚地解释自己。

＆＃13;

<table>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>

  <tr>
    <td>C</td>
    <td>D</td>
  </tr>
</table>

＆＃13;

功能

<script>    
            function myFunction() {
              //variables 
              var input, filter, table, tr, td, i;
              input = document.getElementById("search");
              filter = input.value.toUpperCase();
              table = document.getElementById("table");
              tr = table.getElementsByTagName("tr");

              for (i = 0; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td")[0];
                    if (td) 
                        {
                        if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                            tr[i].style.display = "";
                            } else {
                            tr[i].style.display = "none";
                            }
                        } 
                    }
                }
        </script>

Answer 1

我修改了您的代码以迭代表中的所有td元素。而不是隐藏不包含过滤器文本的单元格，而是选择对它们应用不透明度。它使示例中的内容更加清晰。

在按键操作时，不要忘记去除事件。有关详细介绍，请参阅此帖子：https://davidwalsh.name/javascript-debounce-function

＆＃13;

function myFunction() {
  //variables 
  var
    input = document.getElementById("search"),
    filter = input.value.toUpperCase(),
    table = document.querySelector('table'),
    cells = table.querySelectorAll('td');

  for (var i = 0; i < cells.length; i++) {
    var cell = cells[i];
    if (cell.innerHTML.toUpperCase().indexOf(filter) > -1) {
      cell.classList.remove('no-match');
    } else {
      cell.classList.add('no-match');
    }
  }
}

const
  form = document.getElementById('form'),
  input = document.getElementById("search");
  
form.addEventListener('submit', onFormSubmit);
input.addEventListener('keyup', onKeyUp);

function onFormSubmit(event) {
  event.preventDefault();
  myFunction();
}

function onKeyUp(event) {
  // Debounce this event in your code or you will run into performance issues.
  myFunction();
}

＆＃13;

.no-match {
 opacity: .2;
}

＆＃13;

<form id="form">
  <label>
    Filter text
    <input type="text" id="search"/>
  </label>
  <button>Filter</button>
</form>

<table>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>

  <tr>
    <td>C</td>
    <td>D</td>
  </tr>
</table>

＆＃13;

搜索HTML表格列

1 个答案: