Question

使用与w3schools的table search类似的功能，我收到的错误是，onkeyup使用的函数未在输入元素上定义。函数的名称是相同的，所以这应该不是问题。

HTML

<div class="row">
<div class="container form-container">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 search-form">

<input type="text" id="search" onkeyup="tableSearch()" placeholder="Search for names.." title="Search by Name, Practice Area or Location">
      </div>
</div>

<div class="results">
  <div class="col-lg-12">
    <div id="no-more-tables">
        <table id="results" class="order-table col-md-12 cf">
            <thead class="cf">
                <tr>
                    <th class="numeric">field 1</th>
                    <th class="numeric">field 2</th>
                    <th class="numeric">field 3</th>
                    <th class="numeric">field 4</th>
                    <th class="numeric">field 5</th>
                </tr>
            </thead>
            <tbody>

                <tr>
                    <td data-title="" class="name"><a href="user-1">User 1</a><a href="tel:(407) 420-1414"><span class="phone"><i class="fa fa-phone phone"></i></span></a><a href="mailto:user1@site.com"><span class="email"><i class="fa fa-envelope-o email"></i></span></a></td>
                    <td data-title="location"></td>
                    <td data-title="practice area" class=""></td>
                    <td data-title="email" class="numeric desktop-only"><a href="mailto:user1@site.com">user1@site.com</a></td>
            <td data-title="phone" class="numeric desktop-only"><a href="tel:(111) 111-1111">(111) 111-1111</a></td>
                </tr>

                <tr>
                    <td data-title="" class="name"><a href="user-2">User 2</a><a href="tel:1111111111"><span class="phone"><i class="fa fa-phone phone"></i></span></a><a href="mailto:user2@site.com"><span class="email"><i class="fa fa-envelope-o email"></i></span></a></td>
                    <td data-title="location"></td>
                    <td data-title="practice area" class=""></td>
                    <td data-title="email" class="numeric desktop-only"><a href="mailto:user2@site.com">user2@site.com</a></td>
            <td data-title="phone" class="numeric desktop-only"><a href="tel:1111111111">1111111111</a></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
</div>
</div>

的JavaScript

function tableSearch() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("search");
  filter = input.value.toUpperCase();
  table = document.getElementById("results");
  tr = table.getElementsByTagName("tr");


  for (i = 0; i < tr.length; i++) {

    tds = tr[i].getElementsByTagName("td");
    var found = false;
    //---second loop that goes over all tds in a tr ---can be modified as required to go over only certain tds
    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

您的方法tableSearch位于您的小提琴 Javascript选项中的onload 加载类型中，因此它不在全局范围内。

检查更新的fiddle's Javascript 选项。我选择了“ Wrap in head ”将其置于全局范围内，以便可以从事件处理程序访问它。

Answer 2

也许你可以使用jquery库

$( "#search" ).keypress(function() {
  tableSearch();
});

未使用onkeyup为表搜索定义函数

2 个答案: