我如何才能在部分HTML页面上使用Javascript函数？

Question

我有一个包含搜索按钮和表格的部分HTML页面，并且我希望我的搜索按钮通过使用keyup仅显示与表格匹配的结果。不幸的是，我继承了这个项目，执行搜索的页面是局部的，并且我无法使用我的JavaScript函数。我已经在主页上放置了src行，但是一旦尝试在搜索栏中插入字母，就会出现以下错误：

  

未捕获的TypeError：无法读取null的属性'getElementsByTagName'
              在myFunction（myFunction.js：11）
              在HTMLInputElement.onkeyup（（index）：1）

我该如何解决？

function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("searchtable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

<div class="col-xs-2 no-print" ng-include="'partials/gestioneAccessi/menuGestioneAccessi.html'"></div>
<div class="col-xs-10" style="float: right;">
  <div class="col-xs-11">
    <h3 id="title_name">Cerca</h3>
  </div>
  <br>
  <!--            <div class ="form-group pull-right"> 
                    <i class="glyphicon glyphicon-search pull-left">:</i>
                    <input type="search" class="text-area"  />
            </div>-->

  <!--        <div class="col-xs-11"><form>
                <input type="text" placeholder="Search.." name="search">
                <button type="submit"><i class="fa fa-search">Invio</i></button>
            </form>
            </div>
        </div>-->
  <br>
  <br>
  <div id="usersTable_wrapper" class="dataTables_wrapper no-footer">
    <div>
      <fieldset class="cornice-tabelle">
        <!--                <label>
                                    Cerca 
                                <span class="glyphicon glyphicon-search pull-left">:</span>
                                <input type="search" class="usertable"/>-->
        <div id="usersTable_filter" class="dataTables_filter"><label>Cerca <span class="glyphicon glyphicon-search" ></span>: <input type="search" id="myInput" onkeyup="myFunction()"></label>
          <br>
          <br>

        </div>
        <table id="searchTable" class="table table-striped table-bordered " data-sort-name="date">
          <thead>
            <tr id="tr">

              <th>Username</th>
              <th>Ruolo</th>

              <th>Data Creazione</th>
              <th>Data Disabilitazione</th>

            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="user in users" ng-class-odd="'odd'" ng-class-even="'even'">

              <td>{{user.username}}</td>
              <td>{{user.ruolo}}</td>
              <td style="text-align: center">{{user.dataCreazione| date:'dd/MM/yyyy HH:mm:ss'}}</td>
              <td style="text-align: center" ng-value="$last && caricaPaginazione('usersTable','0','asc')">{{user.dataDisabilitazione| date:'dd/MM/yyyy HH:mm:ss'}}</td>

            </tr>
          </tbody>
        </table>



      </fieldset>
    </div>
  </div>

Answer 1

更改

table = document.getElementById("searchtable");

到（T大写）

table = document.getElementById("searchTable");

function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("searchTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

<div class="col-xs-2 no-print" ng-include="'partials/gestioneAccessi/menuGestioneAccessi.html'"></div>
<div class="col-xs-10" style="float: right;">
  <div class="col-xs-11">
    <h3 id="title_name">Cerca</h3>
  </div>
  <br>
  <!--            <div class ="form-group pull-right"> 
                    <i class="glyphicon glyphicon-search pull-left">:</i>
                    <input type="search" class="text-area"  />
            </div>-->

  <!--        <div class="col-xs-11"><form>
                <input type="text" placeholder="Search.." name="search">
                <button type="submit"><i class="fa fa-search">Invio</i></button>
            </form>
            </div>
        </div>-->
  <br>
  <br>
  <div id="usersTable_wrapper" class="dataTables_wrapper no-footer">
    <div>
      <fieldset class="cornice-tabelle">
        <!--                <label>
                                    Cerca 
                                <span class="glyphicon glyphicon-search pull-left">:</span>
                                <input type="search" class="usertable"/>-->
        <div id="usersTable_filter" class="dataTables_filter"><label>Cerca <span class="glyphicon glyphicon-search" ></span>: <input type="search" id="myInput" onkeyup="myFunction()"></label>
          <br>
          <br>

        </div>
        <table id="searchTable" class="table table-striped table-bordered " data-sort-name="date">
          <thead>
            <tr id="tr">

              <th>Username</th>
              <th>Ruolo</th>

              <th>Data Creazione</th>
              <th>Data Disabilitazione</th>

            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="user in users" ng-class-odd="'odd'" ng-class-even="'even'">

              <td>{{user.username}}</td>
              <td>{{user.ruolo}}</td>
              <td style="text-align: center">{{user.dataCreazione| date:'dd/MM/yyyy HH:mm:ss'}}</td>
              <td style="text-align: center" ng-value="$last && caricaPaginazione('usersTable','0','asc')">{{user.dataDisabilitazione| date:'dd/MM/yyyy HH:mm:ss'}}</td>

            </tr>
          </tbody>
        </table>



      </fieldset>
    </div>
  </div>