javascript - 获取输入元素的 keyup 上未定义的函数

Question

鉴于下表(在 w3schools 处对此表进行了稍微修改的版本)，但搜索所有列，当输入文本框中的值。另外，如何在搜索表格时防止表格标题消失？

HTML

<input type="text" id="search-attorneys" onkeyup="searchAttorneys()" placeholder="Search for names.." title="Type in a name">

JS

function searchAttorneys() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("search-attorneys");
  filter = input.value.toUpperCase();
  table = document.getElementById("attorneys");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    tds = tr[i].getElementsByTagName("td");
    var found = false;
    for (j = 0; j < tds.length; j++) {
      td = tds[j];
      if (td) {
        if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
          found = true;
          break;
        }
      }
    }
    if (found) {
      tr[i].style.display = "";
    } else {
      tr[i].style.display = "none";
    }
  }
}

JSFIDDLE:LINK

Answer 1

HTML

<input type="text" id="search-attorneys" placeholder="Search for names.." title="Type in a name">

Javascript

$(document).ready(function(){
  $('search-atorneys').on('keyup', function(){
    var input, filter, table, tr, td, i;
    input = document.getElementById("search-attorneys");
    filter = input.value.toUpperCase();
    table = document.getElementById("attorneys");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
      tds = tr[i].getElementsByTagName("td");
      var found = false;
      for (j = 0; j < tds.length; j++) {
        td = tds[j];
        if (td) {
          if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
            found = true;
            break;
          }
        }
      }
      if (found) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  });
});

从 js 内部执行而不是从 html 内部执行通常是更好的方法。