我怎样才能得到我的JavaScript函数的部分HTML页面上运行？

Question

我有一个部分的HTML页面，其中包括一个搜索按钮和一张桌子，我希望我的搜索按钮，仅显示通过KEYUP匹配在表中的结果。不幸的是，我继承了这一项目，并执行搜索是部分网页，我不能让我的JavaScript函数与它合作。我已经把主要页面上的SRC线，但一旦我尝试将文字转化成我的搜索栏我得到以下错误：

遗漏的类型错误：无法读取空的特性“的getElementsByTagName” 在myFunction的（myFunction.js：11） 在HTMLInputElement.onkeyup（（指数）：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>